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تأآلىف 
عبدالرحمن الغبان 


مراجعه وتدقيق 


وجدان المشهري 


عزيزي المبرمج الوسيم / عزيزتي المبرمجة الجميلة : 

انتهائك من هذا الكتاب لا يعني بالضرورة أن تصبح أفلاطون 2 
أhعiاerاSi‏ و لكنك ستحصل على أهم الأساسيات و المعرفة التي 
تحتاجھا لبدء العمل مع Silverlight‏ . 


أ : قبل بدء العمل مع 
Silverlight‏ : 


قبل أن تبدأ ب2 قراءة الفصل القادم أود أن أضع مجموعة من التعليمات و الأمور التي 
يجب أن تعرفها عن ا١‏ عآأاع۷آآS‏ » من الجيد جدا أن تعرف كيفية عمل 
ع ااrاeا Si‏ و دورة حياة هذا النوع من التطبيقات و أدوات التطوير › إذا كنت فعلا 
تمتلك هذه المعلومات سابقا » يمكتنك تجاهلها » آما إذا كانت هذه آول مرة تقراً 


فيها كتاب عن ٣‏ ع|أ٣ع۷|أS‏ فأرجوك لا تهمل هذه المقدمة . 


0 


تثبيت أدوات التطوير الخاصة ب خطعناامvاSi:‏ 


تأتي حزم و آدوات تطویر ا۸ ع|ا٣ع۷آ¡5‏ مباشرة مع 2010 Stu di٥‏ اa۾Visu‏ › بل 
يجب عليك تثبيتها بشكل مستقل عن 2010 0أ ںا؟ أهاكآ۷ » ستتعرف 2 هذا 
الفصل إلى الأدوات التي ستحتاجها لبدء العمل مع أ٣عااام۷ااك‏ مع الأخن بعين 
الاعتبارأني أفترض أنك قد قمت بتثبيت نسخة من بيئة التطوير 0أ لاء أهuء۷i‏ 
0 مسبقا » إذا كنت أحد القابعين 2 الإصدارات الأخيرة من 410 Su‏ أجVisu‏ 
فأنا أحد الأشخاص الذين على استعداد لتقبيل يدك الجميلة للانتقال إلى 2010 
بأسرع وقت ممكن › من جهة آخرى لا يمكنك متابعة هذه الكتاب إذا كنت لا تملك 


نسخة من بيئة التطوير 2010 0أ uںاء‏ أجةuكأ۷ا‏ . 


: Silverlight 4 Tools for Visual Studio 2010 تثبيت‎ 


بعد آن تتأكد من تثبيتڪك لأآي من نسخ 2010 10 لاء أھلاءأ۷ا يجب عليڪ 
تثبيت نسخة من 2010 Silverlight 4 Tools for visual studio‏ » ھoi‏ 
الحالة فقط إذا كانت النسخة التي معك ليست 5۲1 › فمن المفترض آنڪ إذا 
قمت بتثبيت النسخة 5۲1 ستجد ا۸عآااعم۷اآS‏ قد ثبت بالفعل أخناء عملية تثبيت 
stu di0 0‏ أuaكVi‏ . ولا قم بعملية التحمیل لهذہ الأدوات من 4 Silverlight‏ 
or visuaأ studio‏ sأ00]‏ بعد الانتهاء من عملية التحميل ابد بتثبيتها بطريقة 


عادية مع ملاحظة أن تكون قد أغلقت 10 لاء أaلاءأ۷‏ أولا . 


: تجد الأدوات السابقة على الرابط التالي‎ O 
http://www.microsoft.com/download/en/detai 
ls.aspx?displaylang=en&id=138149 


: Silverlight developer Run Time ölدİ‎ ٽیبûî‎ e 


كل ما يجب أن تعرفه عن هذه الأداة هو أنك لن تستطيع أن تقوم بتشغيل آي 
تطبية Jذ Silverlight developer Run Time دgجو jgدب Silverlight‏ مثبتە 
على جهازك » إذا حاولت أن تقوم بتجرية آي تطبيق دون تثبيت هذه الأداة فسيخبرك 
0٥0‏ أه ل۷ك۷ بشكل مباشر عند محاولتك لتشغيل التطبيق بأن هذه الأداة غير 
موجودة . بعد أن تنتهي من تحميJ‏ اٺڈÎداةö Silverlight developer run tİme‏ 


أغلق 10٥0‏ لاء أةلاءأ/۷ و قم بتثبيت هذه الأداة . 


تجد الأداة السابقة على الرابط التالى : 


http://download.microsoft.com/download/C/5 


/8/C5877489-8022-42A۸6-8456- 
DOSC2A6C8DFB/runtime/Silverlight Developer. 


exe 


: Microsoft Expression Blend 4 ° 


هذہ لیست آداة لابد من توافرھا لکی تعمل مع ا۸ gع|اا٣۷اا؟‏ و لکن 81۸۵ برنامج 
جهدا ووقتا كبيرا من الممكن أن تقضيه 2 تعلم الأمور الأكثر تأثير 2 طريقة 


كتابتك لتطبيقات ۸ع ا٣٥۷ S|‏ بدلا من إضاعة الوقت ے2 تعلم N1‏ ۸× . 


: تجد البرنامج السابق على الرابط التالي‎ O 


http://www.microsoft.com/expression/product 


s/blend overview.aspxX 


: Silverlight toolkit ٽıبûî‎ e 


على الرغم من الأدوات الأكثر من رائعة التى تقدمها ٣٤‏ عاا٣۷6آآ؟‏ إلا آنك ستتبهر 
حقا بمجموعة أكبر من الأآدوات التى تأتي مع اأ)أاه 0ا مثل خريطة 818 و آدوات 
الرسم البياني و العديد من الثيمات المختلفة ب2 أ۸٣عاأاع۷آأS‏ . يمكنك تحميل 


g)itاtoo‏ من هنا . 


: تجد الأداة السابقة على الرابط التالى‎ O 


http://silverlicht.codeplex.com 


: Deep Zoom Composer ٽıبûî‎ e 


أخیرا آداة Z00" C0" P05٥٣‏ مDeeP‏ و ھی من آکتر الآدوات و آروعھا استخداما 
ے عالم ا۸عااام۷اأS‏ » حيث تستخدم هذه الأخيرة 2 عرض مجموعة من الصور 
على شكل تكبير و تصغير » ستتضح الفكرة لاحقا › عند الحديث عن هذه الأداة . 


یمکنڪ تحميل أداة Deep Z00۳ C005٥‏ من هنا . 


: تجد البرنامج السابق على الرابط التالي‎ O 


http://www.microsoft.com/download/en/details.aspx?displ| 


aylang=en&idÈ=24819 


القرص المرفق مع الكتاب: 


يحتوي القرص المرفق مع هذا الكتاب على مجلدات تمثل فصول الكتاب (رقم المجلد 
يحمل رقم الفصل )» يحوي كل مجلد على ملف الشفرات المصدرية للمتال الذي تم 


تطبيقه 2 الفصل. 


دورة حياة تطبيقات ئغSilverligh‏ 


لا يمكن أبدا تجاهل دورة حياة أي نوع من التطبيقات التي تقوم بتطويرها فمن المهم 
جدا أن تفهم كيف تدار الأمور خلف الكواليس › وذلك ے2 حال واجهتكڪ المتاعب 
تستطيع أن تتصرف بحكمة و ذكاء » ب2 هذه الفقرة سأتحدث عن دورة حياة 
التطبيقات الخاصة ب ا٣عآاامvآأS‏ » يمكتنك تجاهل هذا الفصل إذا كنت على 
معرفة سابقة بهذه المعلومات حيث يمكن اعتبارها معلومات عامة و لكن مهمه جدا 


لکل مبتدئ ے2 عالم تطبیقات ا۸ .Silver|i|g‏ 


e ¢ 


حسنا لندخل 2 صلب الموضوع » 2 هذه النقطة سنحاول شرح دورة حياة تطبيقات 
tاighاverاSi‏ » هناك نقطة يجب أن تعرفها عند الحديث عن تطبيقات ئSilverligh‏ 
فهي تطبيقات شبيهة جدا بتطبيقات سطح المكتب و ے4 نفس الوقت بعيده كليا عن 
تطبيقات سطح المكتب » آعلم جيدا آأنك ستنعتني بالمجنون بعد الجملة السابقة › و 


لكن هذا هو الواقع © »وهنا يأتى دور الحديث عن دورة حياة تطبيقات ا۸ عا Silve‏ 


تبدأ تطبيقات ۸ع اأ S۷6‏ حياتها منن اللحظة التي تضع فيها تطبيقڪ على 


صفحة asp.net‏ »> یمکن نوضصیح تفاصيل ذ لڪ بالشکل التاٽى : 


0 


يقوم المستخدم بطلب صفحة تحتوي على تطبيق أ٣‏ g|ًا S1۷٥٣‏ . 

يتم التأكد من أن المستخدم قد قام بتثبيت نسخة Silverlight U, ja‏ 
|٥‏ متوافقة أو أعلى من النسخة التي قام المطور بتطوير تطبيقه بها . 
یتم تحمیل تطبیق ۸ع ا٣ S۷٥‏ إلى جهاز المستخدم › تطبيق ئSilverligh‏ 
ينتهي بامتداد 3×. وهذا الملف يتم إنشائه 2 مسار معين تتعهد 
مايكروسوفت بأن يكون هذا المسار مجهول حيث يتم حفظ تطبيق .×3٥‏ 
داخل هذا المحلد . 

لاحظ هنا أن ما يتم تحميله هو فقط المكونات الرئيسية للتطبيق مثل 
الصورو خلافه ولا يتم تحميل متلا خدمات الويب . 

بعد تحميل التطبيق إلى جهاز العميل تتولى هنا ۴ا عملية تجميع 
التطبيق و تتفيذه » عند الانتهاء من التحميل تطلق الأآخيرة حدث 


9ا و الذي بدوره يبدأ بعرض التطبيق على المستخدم . 


تحدث هذه العملية مرة واحدة فقط ے2 المرة الأولى التي يتم فيها فتح صفحة 


اع iاverاSi.‏ 2 المرة القادمة فقط يتم معالجة الأحداث المختلفة أو إن صح التعبير 


معالجة أحداث التطبيقات . 


0 


: ASP.net gy Silverlight تlقيبطت‎ 


حسنا هذه نقطة شائكة نوعا ما » يجب آن تعلم آمرا مهما جدا جدا عند الحديث عن 
تطبيقات ا۸عاااع۷آآك فهي تختلف جذريا عن تطبيقات 50.16€ » إذا أمعنت 
النظر 2 تطبيقات 50.١۴61‏ فهي تطبيقات يتم تنفيذها على جهاز الخادم آي من 
جهة اد 56۲۷8۲ بينما تطبيقات ۸ع ا٣ S۷6‏ يتم تنفيذها على جهاز العميل كما 


رأينا ب2 دورة حياة التطبيق 2 الأعلى . 


ے تطبیقات 50.۸1€ یتم تولید شفرات C55‏ و ا۷N‏ 11 و J5‏ › بینما ے2 تطبيیقات 


gاااeاSi‏ ¥ يتم توليد أي شيء سوى صفحة واحدة تحتوي على شفرة JS‏ و التي 


تكون مسؤولة عن استضافة تطبيق ۸ ع|ا S| ۷٥٣‏ . 


آخيرا لنتحدث قليلا عن ما يبحدث عند التحميل بشكل آأكتر تفصيلا » هناك سبعة 
أحداث تطلق بشکل مستمر عند تحميل آي تطبیق ا۸ عاا٣‏ ۷6ا5 و ھی بالشکل 
التالى: 


»« 


|. كل شىء يبدأ من ملف أ"۳ه×.٥0‏ » حيث أنه ے2 داخل هذا الملف يتم 
تحديد آي صفحة من صفحات ا۸ عاا ٣۷ا5‏ ستعمل ولا . 
۲. لدينا الحدث مuا۲ sta‏ _"”icati0ام‏ مه و فيه تستطيع أن تقوم بمجموعة 


تعليمات قبل عرض التطبيق على المستخدم . 


۳. 2 الحدث السابق يتم التوجه لأول أهلاءأ۷أ0١۲0‏ حيث كل صفحة 
Seri‏ یجب أن تحتوي على ألا2ءأ۷اا0ه۲r‏ . 

. SiİZ€€1N3 8€ يتم إطلاق الحدث‎ .٤ 

ه. يتم إطلاق الحدث LayoutUpdated‏ . 

. Ge ۳|0٥°us يتم إطلاق الحدث‎ .٦ 


۷. إذا أغلق المستخدم الصفحة يتم إطلاق الحدث applicatio0¬_EXiİ†‏ . 


مرحبا بالعالم Silverlight ja‏ 
قبل أن ننتقل إلى الأجزاء الجديدة ے2 ۸عااا٣ع۷آأS‏ دعنا نأآخن جولة سريعة على 
بيئة التطوير الخاصة ب ا٣عآااع‏ ۷أ » سأعتبر هنا آنك قمت بتثبيت نسخة من 


أدوات التطوير المختلفة كما تحدثنا سابقا » لذلك لنبداً بالعمل . 


ابدأ مشروع جدید باستخدام Sil ver|¡g ht‏ : 


افتح dio‏ ںtء‏ اھVisu‏ و اختر من اC٤ع‌زمام‏ < ewعہ‏ < eاا؟‏ » اسفل الخیارات 


ستری عنصر جدید باسم Silverlight‏ حدد هذا العنصرو من ثم اختر الخيار الأول 


. Heاl|٥‎ N0۲14 قم بتخییر اسم المشروع إلى‎ » SiاVerاi‎ ght Appاica‎ tion 


Recent Templates «NET Framework 4 ” | Sort by: ا‎ Search Installed Templates 


sual C# 
Visual C# Type: Visual 


A blank project for creating a rich internet 
application using Silyerlight 
Visual C# 


Visual C# 


Visual C# 


Visual CF 


¥ Browse... 


Create directory for solution 


sual Cê‏ ل 
Windows‏ 
Web‏ 
Office‏ 
Cloud . Silverlight Business Application‏ 
Microsoft Robotics‏ 
Silverlight Navigation Application‏ س Reporting‏ 
SharePoint‏ 

WCF RIA Services Class Library 

Test 

WCF 

Workflow 
Other Languages 


Silverlight Application 


Silverlight Class Library 


Uther Project Types 
Database 
Test Projects 


Online Templates 


Mame: SilverlightApplicationl 
Location: chuserstadmintstratordocurmentsiyvisual studio A0101 Projects 


Solution name: SilverlightApplicationl 
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بعد آن تختار inژرaع Silverlight‏ 


New Silverlight Application 


Llick the checkbox below to host this Silverlight application In a Web site, Otherwise, a 


test page will be generated during build. ستخرجح لڪ نا فذة آخری تطلب‎ 


IW] Host the Silverlight application in a new Web site 


منك بعض العلومات (انظر 


الصورة ) » كما تحدثنا 2 دورة 


New Web project name: 
HelloWorld. Web 


New Web project type: 


| ASP.NET Web Application Project 


حياة التطيق ستحتاج إلى مضيف 
م ٭» مھ مم Options‏ 
Silverlight Version:‏ 


لتطبيق أ۸ عا ۷6ا5 و هو مشروع 


I] Enable WCF RIA Services 


جديد من نوع تطبيق ويب يحتوي 


على صفحتبن الأولى أع456.۸€, 

التانية 1١١1‏ » أيضا تمتنحك هذه النافذة خيار تحديد آي نسخة من ئSilverligh‏ 
يستهدفها مشروعك › بشكل تلقائي ستكون النسخة الآخيرة . 

أخیرا لدیڪ الخيار WOC۴ RIA Services‏ eاbھEn‏ و هو خیار یتیح لک تشغیل 

تطبيقات ٣عااا S۷6‏ من خارج المتصفح » سنتطرق لهذا الآمر لاحقا (2 الواقع 

بشكل ممل لاحقا © ) . 


اترك ڪل شيء ڪما هو حاليا و انقرعلى )0 . 
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f Cliemdin‏ اا 

Lito I Hell ofldTestFageasp 
Faden laj HeleWerldT est Pagehir 


n ا وده‎ ٠ 3 و من خلالها يتم تصميم س‎ XAMIL 


Fi Dmign 7 f 1 Ê 
1 lfserCantral x3 Mai چ‎ 


e ۳ ا‎ 
: : e - e مھ چ‎ e 
oe ٤ › به اللأكواد‎ ۱ 
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3 Taner Server Esplarer Hl UserControl serCoetl E Pree... | ۰» e ا 2 2 ۱ ان‎ : e ۱ e 


خلالها تصميم النموذج من خلال السحب و الإلقاء للأآدوات المختلفة › لدينا على 


الجهة اليسرى من النموذج الأدوات الأساسية لتطبيقات أ۸ عا S۷6‏ بينما على 
يمين الشاشة لدينا مشروعبن الأول تطبیق ا٣‏ عاًاا۷6اآ؟ و الثانى تطبيق “٥‏ أو 
المستضيف و سنتحدث عن هذا التطبيق لاحقا و لكن دعا نبداً 2ے تطبيق 


. Yogi Silverlight 


آ ,= [am Helle Wer . NEzresoh Yesual Sadia (Administra iat] e‏ ء جه 
Fils Edl Vimw Pezjeet Build Dsbug Taam Data Format Tsah Tet ndew Fialp 0‏ اس د ( ( اداد ext OX‏ مںن 
A 3 ME N”‏ ا وسع | ۴ | < ۰> ع - د | كاد ٭ | @ ها قا ”لا لن ! 
0 1 . ۴ 7° 1 واا 3 TG FF‏ ء 


dı Common Siren hght Controls 
Border 


شريط الأدوات وألقيها ب2 


e EF 


س النتصف و كنذلڪ اداة 


Herzen 7  Sinekeh 


FETT T 


Curr 


DatiaCirat. 


hHRTer.. 


Marg 
MacHei ght 


Button e‏ و القیھا آیضا آسفل 
اداة ×۴×00 ۲ » (انظر الصورة 


Ogut. - 
Prej ection 


hensierT ra. 


على اليمين) » إذا كنت لا ترى نافذة الخصائص يمكنك إظهارها من خلال < ۷|۷ 


. Window preppies 
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Properties wr f x 
Button btnClickMe aff 


FM Properties # Events 


ENA 


الشريط إلى ×١۳‏ وقم بنفس الأمر مع الأداة 07ا80 إا ا 


حدد أداة ×18€×00 و قم بتغيير الخاصية ۸3۸١8‏ 2 أعلى 


DUatakontext Bindings. 

Style ResgurCe.. |ھ‎ 

Content * Button (انظر‎ btnClick Me إلى‎ Name وقم يتعيير الخاصية‎ 
Lommand 

CommandPar... ا ال ار( ا‎ ١ 


IsEnabled 
Layout 
Brushes 
Text 
Visibility 
Transform 
Other 


لننظر إلى شفرة )۸۸۷ التي تم توليدها حتى هذه اللحظة و لنشرحها بشيء من 
التفصيل : 


E tUserControl x:Cla5ss="HelloWorld.MainPage" 
xmlns="http: #7 schemas .microsoft . com/winfx/ 2886fxaml/presentation" 
mlns:x="http: 7 fschemas.microsoTt . com/winfx/ 2886/ xaml” 
xmlns:d="http:7fschemas.microsoTft ,com/expression/blend/ 2888” 


فضاءات الاسماء "2886 xm1ns :me=" http: / schemas .openxmlformats .org/markup-compatibility/‏ 
me :Ignorable="d™‏ 
d:DesignHeight=" 388" d:DesignHidth=" 48";‏ 1 
اا ےا ےا ےا ے اا ےا ےا ا ےا ےا ےا ےا +orid x:Name="LayoutRoot" Background="white"?‏ = 
1 


El +Button Content="Button" Margin="@,0,189, 241" Name="buttonl" Height="23" 
1 verticalAlignment="Bottom" HorizontalAlignment="Right™" wWidth="75" /; 1 
1 TextBox Heilght="23" HofrizontalAalignment="LeTt" Margin="1@, 18,94,80" 1 

Name="textBoxl" VerticalAlignment="Top" Width="129" ,/; 1 
1 </Grid> - 
| s7 UserControl? 


الشفرة الناتجة عن عملية السحب والإالقاء 


الفضاءات أداة من أدوات ا ع 5|۷6۲ تكون موجودة داخل فضاء آسماء يتم تعريفه 


أعلى ملف الشاشة › نفس الأمر الذي يحدث عندما تود استخدام 0/| مثلا فعليك 
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0 


استدعاء فضاء الأسماء 5/58١١.|0‏ أعلى الشفرة 2 سي شارب » أما الجزء الثاني 
من الشفرة فهي الشفرة التي تم توليدها عند عملية السحب و الإلقاء » يجب أن 
تلاحظ هنا ان ا00 ۸ا۷01ھا شيء اساسي ے ڪل نماذج ٤٣عاا٣‏ ۷ا5 و ڪل 
الآدوات تكون داخل 1۸00 0ه |1 » لاحظ هنا أن هذه الأخيرة ليست سوى ل١6۲‏ 
سنتحدث عنها لاحقا و كما تعرفنا سابقا فإن هذا الجزء هو الجزء الأول الذي يتم 


بناءه عند تحميل التطبيق ( راجع نقطة دورة حياة تطبيقات اعا عvاا؟S‏ ) . 


عد إلى نافذة التصميم و انقر نقرا مزدوجا على btnClick Me yall BU††07‏ « 
نتيجة لذلك ستفتح نافذة الشفرة و قد قام 5۷010 أهلاءآل/ا بشكل آلى بتوليد 


الحدث )ا و هنا يمكنك كتابة شفرة سى شارب » اكتب متلا : 


1 txtName.Text =" Hellow World ": 


عد إلى صفحة ا۸۷ لاحظ الحدث الذي تم توليدہ ٿلعنصر butClic>) <٤‏ › 


كما بے الشفرة : 


<Button Content=" Button" Height="23" 
HorizontalAlignment="Left" 


Margin="160,179,0,0" Name="btnClickMe" 
VerticalAlignment=" Top" Width="75" 
Click="btnClickMe_ Click" /> 
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7 هناك العديد من الأآحداث التي يمکنڪ 


f Properties  +# Events 


التعامل معھا من خلال ا۸ عااverاSi‏ . من 
Cik‏ 


DragqEnter 
9 Eve Nts نافكذة الخصائص حاد التبويب‎ 
DragqÛver 
Drop 
) 2 K ۱ کا ا ك‎ 3 ۶ 5 K س “ 3 سر‎ GotFocus 
) ا ی ما فخ ك تا‎ 
KeyDown 


الصورة على اليمين) أحداث لم تكن تحلم 


Loaderl 


ج بھا سواء 2 تطبيقات 50.16 أو تطبيق 


Manipulation Completed 


ManipulationDelta 
\W p F۴ ManipulationStartedl 
MouseEnter 
MouseLeawe 
MouseLeftButton Down 
MouseLeftButtonllp 


Ld 
Ld 
Ld 
Ld 
L3 
E 
Ld 
Ld 
Ld 
Ld 
LostFocus Li 
Ld 
L3 
Ld 
Ld 
Ld 
Ld 
L3 
Ld 
Ld 


Mousellowe 
FF Properties چ‎ Solution Explorer f; Team Explorer 


حسنا لنقم بتشغیل التطبیق › الآن آنقر على زر ۴5 آو على 0۴5188۸8 S۹۲۲‏ من 
شريط ع061 للبدء بتنفيذ التطبيق » سوف تفتح شاشة المتصفح و بها تطبيق 
اااعاSİ‏ الذي قمت بتطویره قبل لحظات › إذا نقرت على ال 0۸الا8 ستخرج 


. TextBox Jı Hello word ٿڪ رة‎ 
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0 


أغلق المتصفح وعد مجددا إلى بيئة التطوير و حدد التطبيق ٣|۸‏ ۷8[أS‏ من نافذة 
tion Explore‏ uاS0‏ ثم انقر بزر الفأرة الآیمن و اختر الآمر ۲۲٥06۲١٤5‏ » بشكل 
تلقائي سوف يحدد 1٥0‏ ناء أھںاءا۷ التبویب ۸۲ ع|آا٣۷6اآ5‏ انزل إلى الأسفل قليلا 
وقم بتحدıد‏ lالÎمر Enable running application out of browser‏ (انظر 


“| الصورة على اليمين) 


Build Hella Worldd Hella Worldd 
Build Events Startup object 
| 2 ۶ a » 2 د‎ : 
ا کد مں تحل يد ک لهت‎ Reference Paths HelloWoridê App " Assembly Information 
Signing Silverlight build options 


( FEY 9k لخا تم أعد‎ | Cede Analysis E Slr 
۰ھ 5 ۰ھ‎ Silverlight 4 
Xap filê Ramê 


* ۰ »» »« Hello Worlddãxap 
التطيق محددا بالضخط‎ a 
۹ ee Reduce XAP size 


Enable running applica ıt of the browser 
j ٠ أ چ‎ 1 F۴ 5 ۱ COut-of-Browser Settings . 
٠ ٠ Generate Silverlight mar Ê 


Manifest file ternplate: 


Properties AppManifest xml 


EEE‏ و ی 
لقد آصبح تطبیقڪ يعمل بشكل كامل كتطبيق سطح مكتب و ليس تطبيق ويب 
!! و هذا الأمر يعود الفضل فيه إلى دورة حياة تطبيقات ٣۸‏ عاااع۷آأ؟S‏ كما تحدخنا 
سابقا » هناك فصل كامل يتحدث عن هذا الآمر فلا تستعجل أرجوك » فقط 


امنحني القليل من صبرك و ووقٽتڪ . 


ٳٿى هنا ڪون انتهيت من الحقدمة »تطرقت خلا لها إلى آدوات التطوير و بيتة العمل و 
تقسيم العمل و رأينا كيف تؤثر عملية السحب و الإلقاء على شفرة )۸× و تعرفنا 
على دورة حياة تطبيقات ١‏ ع أا ۷6|آS‏ و رآينا ب2 الجزء الأخير كيف أن دورة الحياة 


تؤثر بشكل مباشر على طريقة عمل تطبيقات ا۸ gعاا٣ Sive‏ . 
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الجزء الأول 
البداية مع silverlight‏ 


2 هذا الجزء ستتعرف على اساسيات التصميم 2 برنامج Microsoft B|0 Nd‏ 
والتعامل مع "30١‏ ١ه‏ ثم سنتعرف على أدوات أ 5|۷6۲ القياسية وأهم 


خصائصها وأحداثها . 


بعد الانتهاء من هذا الفصل يحب أن يضاف إلى معرفتك التالى. 


Microsoft BI6 ^d ى”Je التعرف‎ 


9Si۷6۲1١9 ۸ التعرف على خصائص وأحداث الأدوات القياسية ے تطبیقات‎ ١ 
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الجزء الأول : الفصل الأول _ ي 


الفصل الأول ٠‏ 
تصمیم تطبیقات ٤ہ‏ عااr Sil ve‏ 


حسنا لست فخورا يما سآفعله 2 الصفحات القادمة » ولكن جرت العادة عند الحديث 
عن تطوير تطبيقات ۸ ع|أ٣‏ 5|۷6 أن يبدأ الكاتب مباشرة مع أدوات التحكم الموجودة 
Silverlight 2‏ › مثلا ×0 1€×tb‏ و Bi0۸‏ و غيرها › لکن مع الأسف الشديد 
سأخالف الشريعة هذه المرة و لن أبدأً بالحديث عن الأآدوات » و لكني سأتحدث عن 
التصميم فكل شيء 2 ٣1‏ ع|آا۲ 5|۷6 عبارة عن تصميم . 


بعد الانتهاء من هذا الفصل بحب أن يضاف إلى معرفتک التالى : 


استخدام البرنامج الحړظيم Microsoft Bled‏ . 
e‏ التعامل مع ¬ثanimati0‏ . 


تعديل 5|٥‏ الأدوات الموجودة من قبل . 


ف 


أرجو أن تكون قد قمت بتثبيت النسخة الرابعة من 4١١٥٤ا8‏ كما تطرقنا 2 المقدمة . 
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الجزء الأول : الفصل الأول چ 


: Microsoft Blend jyİعE انلتعرف‎ 


2 بداية ظهور ا۸٣‏ عاا٣ع۷اا؟‏ » كان واجبا علیڪ آن تتعلم )۸۷× حتى تعرف 
كيف يتم إنشاء التطبيقات » بل لم تكن تستطيع أن تفعل أي شيء إذا كنت لا 
تعرف ا۸۷N×‏ » و هنا قامت أا0كماMic‏ لعلمها مسبقا طبعا بأن هذه اللخة 
الجديدة ستكون عائقا أمام المطورین للانتقال إلى ۷۲۴ آو †٣عآًا٣ع۷آآ؟‏ » بتطوير 
Microsoft Blend‏ » حیث یمکنک آن تقول بأن 8|۴٣٩‏ ا۴ ەsهMicr‏ هو المکان 


المناسب لتصمیيم تطبیقات )^ g¡اr Sive‏ و ئيضا WPF‏ . 


حسنا لنبدا بالعمل › افتح 8|6١۵‏ و من نافذة ۷٤٥0۳٥‏ حدد الخیار ۸٥W‏ 


. . 1 E 
Silverlight  رoخI‎ pè project کا‎ 
ا‎ EE. BL Silverlight Application + Website 
+٠ «e »۾‎ HF wy 
فم “عبار | ست المشروع إلى‎ p OJ e Ct K7 Silverlight Databound Application 


k7 Silverlight Control Library 


2 Silverlight SketchFlow Application 


IntoBlend‏ حدد اللغه سی شارب و اختر 


Ve rlight Application ST TF‏ . حدد 


Name | IntoBlend| 


e e 
جهھ‎ e * e * »« ۰ | | h 4 | 
کا حه المشروع لت انقر‎ | ve ۲ 18 ocation CN UsersiAdministrator{Docuıments\Expressi TOW E 
anguage Visual C# 


على )0 (انظرالصورة على اليمين) . 
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الجزء الأول : الفصل الأول چ 


2 الحقيقة لا يوجد شىء جديد يختلف 2 واجهة 4¬عا8 عنj «visual Studio‏ 


سوى نافذتين تقريبا أو ثلاثة » لذلك لن أتطرق لطريقة استخدام 0|۴١۵‏ فالأمر 
أشبه باستخدام برنامج الرسام » أما عن النافذتين المختلفتين فهما بالشكل التالي 
أو 0bject and اimeاLİine(OA TL)‏ و هنا يمكنك رؤية كل الأدوات التي تقوم 
برسمها على النموذج داخل قائمة منظمة بشكل جيد بحيث يسهل التعامل معها 
أثناء عملية التصميم . أيضا من نفس هذه النافذة يمكنك إنشاء ما يعرف ب 
0ل St‏ وهو تحريك الأدوات خلال فترة زمنية معينة » كما سنرى 2 هذا 


الفصل لاحقا . 


IntoBlend.sln - Microsoft Expression Blend 4 


File Edit View Object Project Tools Window Help 


Projects * , Assets States # x MainPage.xaml * Properties 
TE EEE EE EE lL 
earth athing selertec 5 Name 


kK FF solution "IntoBlendî û project] 
r Jî IntoBlend 

: References 

۹ * J Properties 

* Ê App.xamı 


٥ 
BM x 


Objects and Timeline 
[UserControl] 


rT fs [UserControl] 


IM LayoutRont 


vl ù EE =+ E, 


UserControl 


1 

2 xmlns="http: //schemas .microsoft. com/winfx/ 2986/xaml/presentation 
3 xmlns:x="http: // schemas .microsoft . com/winfx,/ 23986/ xaml™ 

x:Class="IntoBlend.MainPage™‏ ج 

5 Width="648" Height="480"z» 

6 

7 

8 


arid x:Name="LayoutRoot" Background="White™"/> 
4# UserControl> 
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الجزء الأول : الفصل الأول 


النافذة الثانية هى نافذة كلاأ3أك و هى تقوم بعمل نفس الأآمر الذي تقوم بعمله 
0 للا و أيضا سنتطرق لهذه النافذة نهاية هذا الفصل . آما ما بقى من 
أشرطة فأعتقد أنه من السهل جدا أن تستنتج بنفضسك ماذا تفعل › الأمر فقط 


اختلاف بسيط 2 الأسماء عما هو عليه 2 0أل لاء أهuكأ۷.‏ 


النافذة eہiاeصti and‏ ctءزطه‏ و التعامل مع الألوان في إمءا8 و 
2 حقيقة الأمر كل التأثيرات ثلاثية الأبعاد تقريبا ما هي إلا خدع بصرية 2 
طريقة التلوين و رسم الكائنات » ستنحتاج ب4 هذا المتال إلى تلاثة آدوات من النوع 


٤1ا۴‏ » ستجد هذه الأآداة 2 الجهة اليسرى الأداة الرابعة 


Rectangle 


__ "0 من الأسفل (انظر الصورة على اليمين) › إذا كنت لا تراها 


Line) Ellipse (L] | 


انقر بزر الفأرة الأيمن على الأداة و ستجدها ب2 القائمة 
حددها ثم انتقل إلى النموذج الأبيض الذي 2 منطقة التصميم و ارسم ع5 ]اا٤‏ 
مرة واحدة 2 آي مكان بشكل عشوائي . بعد آن تنتهي من الرسم انتقل إلى نافذة 
الخصائص (إذا كانت تافذة الخصائص غير موجودة يمكنكڪ عرضها من 
Windows <> preppies‏ ) » 2 نافذة الخصائص حدد المجموعة ألاLK۵۷0‏ ثم قم 
بتغيير العرض والطول إلى ٠٠١‏ » أيضا أعد تسمية €sصElli‏ إl” BeasdElIlipse‏ « 
من تافنة object and ۲|m e11٣‏ حدد seمp|اااBeaSd۴‏ و انقر بزر الفآرة 


الآأيمن و اختر 00٥۷‏ ثم مجددا اختر ۲35€ ستضاف أداة جديدة للنموذج الذي 
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الجزء الأول : الفصل الأول 


أمامك تحمل الاسم ۷م٥)€_‏ seمااا٤ Beas‏ قم بتغيير اسم الأآداة إلى 
leve ise‏ » هذه المرة من نافذة التصميم كرر نفس العملية حدد 
eves‏ 1بالفأرة باستخدام € + ١|‏ و آلصقها من جديد و غير اسم الأداة 


الجديدة إلى e€sضLeve|3Elli‏ . 


تأكد بأنك قمت بتحديد الأداة عءم|اا٤3|ع۷عا‏ و قم 


بتخيير ححم الأداة من المجموعة الاه ]ا إلى ٠٠١‏ طولا و 2 1 
J)‏ )) 
عرضا » قم بتحديد الأداة الثانية 5€م|اا۴٤12٥1€۷‏ ثم قم ل ` a‏ 


بتغيير الحجم إلى ٠٠١‏ طولا و عرضا › اترك الأداة 
BeasdEllipse‏ gے‏ شاأنها . عد مجددا إلى liفiة Object and (O0A^۸1L)‏ 


( Layo u۸ 00 و حدد جميع الأآدوات الثلاثة ( ا تقم بتحديد‎ "|e in 


ثم انقر بزر الفأرة الآيمن و حدد الخيار 81ا۵ و من i۾ horizontal center‏ لكي 
تكون جميع الأدوات متطابقة فوق بعضها بالمنتصف › استمر بتحديد جميع الأدوات 
انقر بزر الفأرة الأيمن و حدد الخيار |٣0‏ مل6۲01 ثم اختر 6٣۲١١‏ ماقمنابعمله 
الآن هو تجميع هذه الأدوات كلها داخل 6۲١‏ واحد » و هذا الآمر سيسهل عليك 
كثيرا التحكم بجميع هذه الأدوات خصوصا عند الحديث عن تحريكها من مكان إلى 
أخر » من المفترض ان أن تكون هذه الأدوات جميعها فوق يعض و متناسقة يطول 
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الجزء الأول ٠‏ الفصل الأول 


Properties‏ لننتقل الأآن إلى عملية التلوين › 2 البداية سنتعامل مع 


Name LeveBEllipse 


Type Ellipse 


العنصر ۴٥5م‏ اا٤3|عم۷عا‏ حدد العتنصر من نافذة 0۸۲1 


ا آو من متطقة التصميم باي الطربقتين ترید 9 اتتقل إلى 


e‏ = نافذة الخصائص » حسنا على عكس 0أ لاء اھچuءاv‏ و 
الذي يتعامل مع الآلوان 2 أكثر من منطقة › يأتى |۴١۵‏ 
en‏ 


E‏ ليجمع كل الألوان التى تستطيع تغييرها لأي أداة كانت 
Opacity 100%‏ 
e Visible‏ 2 ۱ ® و ۱ » ۹ 1 


StrokeThickness 1 


0 


ينقسم شريط الألوان إلى ثلاثة أقسام أولا المنطقة المراد التعامل معها و تسمى 
65ل مثل الخلفية و الحدود و لون الخط .. الخ › أما المنطقة الثانية و هي 
طريقة التلوين و لها أريعة أشكال إما آن تكون شفافة ( كع٥اكں‏ 8۲ ۸0 ) أو مصمتة 
يلون و|حد ) Gradient Color ) jlgl™¥ا ãجردتn gî ( Solid Brushes Co|OF‏ ( 


أو الحصول على الألوان من مصدر 2 المشروع » كما سنرى لاحقا 


هنا حدد الخيار Brushes ٤010٣‏ idاS0‏ ثم اختر اللون الآسود › حدد الآن 

leve i|pse‏ و اختر هذه g۲2 1e" C010۲‏ أو الألوان المتدرجة › عند تحديدك 
لهذا النوع من التلوين سترى 2 الأسفل قليلا شريط التعبئة و يجب أن يحتوي على 
مسارين على الآقل › أيضا يمكنك أن تحدد أكتثر من تدرج بالنقر على هذا الشريط 
» أضف لون ثالث بالنقر بے أي مكان و حدد اللون الرصاصي أو اكتب هذا الرقم 2 


خانة اللون #۴۴۳٣۳3۳3٤3‏ » من الآسفل على اليمين حجم التعبئة حدده ٥١‏ › 
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الجزء الأول : الفصل الأول 


لننتقل الآن إلى الأآداة الأولى عءم|آاآا٤‏ 8635۵ قم بتغيير عرض الأداة إلى ٠٠١‏ و 
مجددا غير الألوان إلى 0|0٣‏ ١عأك١ه۲۵ع‏ » هذه المرة انزل قليلا إلى المجموعة 
Appearance‏ و هي مجموعة تتعامل مع التأثیرات › من الخیار ٤۵٤‏ اضخط 
على ۸6۷ و حدد الخيار DropShadowE ffe‏ »ان سوف يصبح لديڪ 


خيارات جديدة للتعامل مع هذا ٣۵ع‏ الجديد › 


إذا كنت لا ترى هذه الخيارات يمكنڪك إظهارها من 
خلال نقر الاسم الذي بجانب كلمة أ)ح٤عآ؟ع‏ » قم 
بتغخيير الخاصية ءںال۵ ۸۵ B| Uu‏ إلى ٠۰۰‏ يو ڪنٽذلڪ 
الخاصية (۷أ٤3م0‏ إلى ٠٠١‏ » و اجعل الخاصية 


Shadow Depth‏ 0 » ليصبح لديك 2 نهاية المطاف 


شكل وعاء الححر السود الكريم كما هو على جدار 
الكعبة المشرفة ( الصورة على اليمين ). 


بقي لدينا الآن رسم الحجر الأسود » لن نقوم فعلا برسم الحجر الأسود و لكن ما 
ستقوم بعمله هو انعكاس أشعة الشمس على الحجر الأسود » الهدف من هذا الأمرهو 
التعرف على ٣3110۸‏ ۸ھ ے2 ا verlighاSi‏ و التحکم ب ۲۷003۲۵ Sti0‏ و التعامل 


مع كل۷اأهاك إذا لنبداً . 
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الجزء الأول ٠‏ الفصل الأول 


لعمل هذا النوع من الظل سنقوم أولا برسم أداة جديدة من النوع 5€ اا۴ » ارسم 
الأداة بعيدا عن الرسمة السابقة و حدد العرض ب ٠٤١‏ والارتفاع د ٠١١‏ › من نافذة 
الآلوان حدد نظام التلوين E۲3۵ ء١ C00١‏ » اجعل بداية اللون من الجهة اليمنى 
باللون الأسود و 2 النهاية بالجهة اليسرى أبيض › ثم قم بتخيير نظام توزيع الألوان 


إلى R۸ gradi‏ و ذلك من خلال تحديد أسفل 


شريط التعبئة بالجهة اليمنى ( انظر الصورة على اليمين 
). يمكنك أيضا استخدام أداة 5Sأا00 ١‏ ع8۲30 من شريط الأدوات ( الشريط الذي 
اخترت منه ۴5€ ) لجعل الدائرة تبدو بالشكل الذي على 
اليسار و ذلك بتحريكها من الأعلى و الأسفل و المنتصف › 


ليس الأمر غاية ب2 التعقيد بحيث يحتاج إلى شرح . 


الخطوة التالية هي الانتقال إلى عملية تحريڪ هذه 
الصورة داخل وعاء الحجر يحيث تبدو كأن أشعة 
الشمس تنعكس على الحجر من الداخل . 2 البداية 
اختر السهم الآسود من أعلى شريط الأدوات حتى 


E‏ تتخلص من هذه الأداة 00/5 ٤٣ع di‏ ۲۵ع ثم اسحب 


الدائرة إلى منتصف النطقة السوداء ب4 الوعاء › 


ليصبح الأمر كما 2 الشكل على اليمين . 
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الجزء الأول ٠‏ الفصل الأول 


من النافذة 0۸11 ستجد زر زائد 2 الأعلى انقر عليه » ستظهر آمامك نافذة إنشاء 
۴/0 ا اجعل الاسم كما هو لا مشكلة › بعد أن تنقر على موافق سترى زر 
أحمر 2 الأعلى و هذا يعني بأن أي حركة ستقوم بها سوف تسجل داخل 
۴/0( » لا حظ أيضا الشريط الزمني على اليمين و فوقه شيء شبه النجمة 
من خلا لها تستطيع آن تضيف فواصل زمنية بين ڪل حرڪهة وحرڪه . آيضا لديڪ 


شريط التحكم لمشاهدة ماذا فعلت »(انظر الصورة 2 الاسفل ): 


5 ® 
IntcBlend.sln - Micrasoft Expression Blend 4 


File Edit View Object Project Tools Window Help 


Projects Assets ™ , States MainPage.xaml* * 


salada 


Ellipse] 


Frojetî AutoCompleteBox @ Staryboardl timeline recording is on 
=i Border 


eı 
> Controls - 
¢ Button 


Styles 
Behaviors ل‎ 
shapes ê LhertkBox 


Effects 


E ComboBox 


Ll ContentPresenter 


LL EES 
Objects amd Timeline 


= Storyboard 


[UserLontral] 


r Fs [UserControl] 


vr iF LayoutRoot @& 


r i [Grid] 3 
#F û BeasdEl @ 
O Level2El ® 

2 LevelBEl ® 


@ [Ellipse] FF o 
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الجزء الأول : الفصل الأول 


لعمل تآثير الشمس سوف نقوم بتصغير الدائرة آولا و من ثم تكبيرها من جديد › بعد 
إضافة 50۲۷003۲١4‏ حدد دائرة الشمس من نافذة 0۸11 ثم قم بسحب الخط 
الزمني الأصفر حتى الثانية الأولى اضغط على زر النجمة من الأعلى لتضيف نقطة 
فصل ثم قم بتصغير دائرة الشمس باتجاه الغرب قليلا »> كرر عمليه التصغير من 
جديد إلى التانيه التالته بعد دلك قم بتكبير الدائرة من جديد حتى التانية السابعة 


> ( انظرالشكل التالي ) : 


للأسف لا تستطيع أن تتحكم بجعل هذا ۸1١١310١‏ يتحرك إلا من خلال الشفرة 
> لذلك من نافذة كأ٣ع[ه۲م‏ حدد النافذة ١/31۸3٥‏ ثم اضغط على السهم 
بجانبها لترى صفحة الشفرة 5S٤.|١ه۸°38€.×4‏ ۷/41 ے المحشید الرئیسی أآضف 


الشفرة التالى: 


1: Storyboard1.Begin(); 
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الجزء الأول : الفصل الأول 7 ک 


اضغط على 8 + ا۸ء + أ٣ا‏ » لبتاء التطبيق ثم انقر على زر ۴5 للبدء بالعمل و 
انظر لعملية التحريك كيف تتم › ما زالت لدينا مشكلة هنا › أآنك لا تستطيع آن 
تقوم بتفعيل 50۲۷003۲4 بعد توقفه » یمكنك استخدام ١0ا8‏ مثلا و 
تفعيلها من هناك › لديك العديد من الطرق فيما يخص 
t0‏ و هي تتيح لڪ التحکم بشکل ڪلي 2 
Silverlight 2 animation‏ و WPF‏ . تستطيع كتابة 


6 ۱ا »مھ من خلال ۱ »۾ ٠‏ 1 ا زر الآأحداث الموجود بجانب E‏ 


kKeyDown 


keyllp 


Layoutllpdated 


الخصائص ( انظر الصورة على اليسار ) › قم بتحديد الحدث 


)اا للآداة 0۸ا8 واكتب الطرق بالشكل التالي : 


ManipulationStarted 
MouseEnter 
MouselLeave 


MouseLeftButtonDown 


MouseLeftButtonllp 


1: Storyboard1.Pause(); 
2: Storyboard1.Stop(); 


هناك طريقة أخرى تختلف تماما عن هذه الطريقة و هى تعتمد على الآأحداث بشكل 


كلى » مثلا عندما يغادر التركيز صندوق النص يتم إطلاق هذا الحدث »› حيث 
تعرف هذه الطريقة ب كلاأ3ا؟ » ارسم ×18×80 على نفس النموذج 2 مكان آخر ( 
ستحد آداة ×۲€×80 2 النافذة كئأ٥ككA‏ ) من النافذة كلااةاء أضف كلااsta‏ 


جديد (الزرالأيمن 2 الأعلى) . 
جديد (الزرالايمن 
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الجزء الأول : الفصل الأول ر 


ستحمل النافذة عتوان جديد تحت مسمى 
İsua Sta tusGroUPp‏ .ے2 هذہ الأخیرة انقرعلی زر 


إضافة ليتم إضافة Sكuا†ة†‏ 5ج uءأ۷ا‏ » غير اسمها متلا 


إلى 105۴0١١٥١‏ (انظر الصورة على اليمبن ) . لاحظ 
الآن أن الأمر يعود مجددا فتصبح منطقة التصميم باللون الأحمر استعدادا 
للتسجیل »من خلال کلااھا؟ لا تحتاج إلى التعامل مع ۳٣٤11١٣٥٤‏ بشکل مباشر› 
فقط قم بتغير المدة الزمنيه إلى مدة معينة و لنقل مثلا تانيتين › و ذلك من خلال 


. +. J| Default translatiټ0¬‎ رıيغت‎ 


الآن حدد ×80×€[ و توجه إلى قائمة الآلوان من 


شريط الخصائص و دد BorderBrush‏ من 


Type Something 


الأعلى » ثم قم بتغيير لون التصميم إلى ما يحلو 
لك » هنا سأجعلها باللون الأحمر (انظر الصورة على اليسار ) › بعد أن تنتهي من 
تسجيل تغيير اللون » عد إلى شريط كلاأةأك و غير الحالة إلى (4٥‏ وذلك 


الخطوة الأخيرة هي إطلاق هذا الحدث عند الخروج من ×1€×80 مباشرة » لعمل 
ذلك انتقل إلى صندوق الأدوات A556١‏ و اختر هذه المرة التصنيف 8۸3۷10۲5 › 
ثم اختر الأداة 5t au SA ٣100‏ ا60 أو فقط ابحث عنها 2 الشريط من الأعلى 


. 
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الجزء الأول ٠‏ الفصل الأول 


قم بسحب الأداة وإلقائها على ×1€×80 بے النافذة 0۸11 أو على ×80×€] _2 
منطقة التصميم » ستظهر على اليمبن خصائص هذه الأآداة الجديدة » حدد من 
Common ja 9 « MouseLeave رyîëخıg EventName aıصlëlı Trigger‏ 
ties‏ ۲مPro‏ حدد الخاصية ۳0€ Status N4‏ و اختر ال 1051۴0٥‏ » خطوة آخیرة 
قبل أن تقوم بتجرية التطبیق اضف ١٥۷0ا‏ إلى النموذج »حتى تستطيع أن ترى 


الحدث 105۴۳0٤٥١‏ »نف البرنامج الآن و انظر إلى النتيجة . 


أحد أهم المميزات ے2 تطبيقات اع |أ 5|۷6 أنه يمكنك تعديل أي شيء فيها تقريباء 
لنآخذ على سبيل المتال صندوق النص » إذا أردت أن تعرف كيف تم تطويره بالكامل › 
فكل ما عليك عمله هو النقر على أي ×0 1۴×85 و اختر esام ٤di ۲۴۳٣‏ و من ثم 
اضغط على )0 و استمتع بمذاق شفرة ۸1× شهي © ( انظر الصورة ب2 الأسفل 


)» يمكنك أيضا تعديل 5|٥‏ هذه الأدوات بشكل عادي جدا كما شاهدت 2 هذا 


Template 


Base @ ReadOnly state recording Is on 


vT LommonStates 


Default transition 
Normal 
Mouseliver 


Disabled 


2 Readûnly 


Type something 
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الجزء الأول : الفصل الأول 


على الرغم أننا لم ننجز شينا عمليا حتى الآن ما زلنا 2 الأساسيات و ما زال الكثير 
2 ۸۵اB‏ خفيا و لكن تعرفنا على مكامن قوة 8|١4‏ » التعامل مع ١0ا3" anİ‏ 
كان سابقا معجزة علمية بحد ذاتها › رآينا ب2 هذا الفصل كيف يتم التعامل معها 
بطريقتين سواء 5ا53 أو 510۲۷003۲۵ و رأينا كيف يتم التعامل مع الألوان و 
التصاميم » أيضا تطرقنا لأهم النوافن 2 5|٥١١‏ و طرق التعامل معها . آخيرا رأآينا 
ڪيف يمکٽنڪ الحصول على شفرة آي اداة ے2 ا٣۸‏ ع|اا٣‏ ۷6ا5 و ڪيف يمکنڪ 


الاطلاع عليها . 
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الجزء الأول : الفصل الثاني س 


الفصل الثاني 
أدوات عام ااك القياسية 


2 هذا الفصل سنتطرق لأدوات ا۸٣‏ عاااعvاآS‏ الأساسية Button Jin‏ و TextBox‏ 
و ×0 518ا و غيرها » سنتعرف على الفروقات بین أدوlت Silverlight‏ وڪ windows‏ 
» سنرى أكثر الخصائص استخداما لهذه الأدوات و أكنر الأحداث التي يتم 
التعامل معها خصوصا عند الحديث عن مطور التطبيقات ۴0۲۳ Windows‏ 
ستجد ب2 هذا الفصل العديد من الملاحظات التي تبين الفروقات بينهما أثناء شرح 


كل أداة . 


1 1 


بعد الانتهاء من هذا الفصل يحب آن يضاف إلى معرفتک التالى : 


استخدام أدوات ٣ع‏ اا٣ S۷6‏ القياسية . 
التعامل مع data bindi ^gE‏ . 


التحقق من البيانات و Data valid ati‹0¬‏ . 


ڇڪ 
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الجزء الأول : الفصل الثاني 


استخدام أدوات عام ااك القياسية : 


أو لا الخصائصضص المشتركة بين الأدوات : 


الخاصية ۴|0W 01۲٥٣10۸‏ :و تستخدم لتحديد 
اتجاه النص سواء من اليمين لليسار لدعم اللغات 
متل العربية آو من اليسار لليمين للإنجليزية متلا » هناك طريقتين 


للتحكم بهذه الخاصية سواء عن طريق نافذة الخصائص أو من خلال 


الخاصية أ×€] : و تستخدم لتعيين النص أو الحصول على قيمة من 


×16€×(860 مثلاء يمكنك تعيين النص من نافذة الخصائص أو من 
خلال الشفرة »و هي تستقبل و تعيد متغير من النوع S١۱١8‏ . 

الخاصية عا٥ة٣عءا‏ : و هيا توازي الخاصية ۴۸۵٥٤٥١‏ ے2 تطبيقات 
Windows 0M‏ و تعید و تستقبل متغیر من النوعء  86001€31‏ 
حيث تستخدم هذه الخاصية لتمكين المستخدم من التفاعل مع 


×80×€[ أو عدم التفاعل معه . 
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الجزء الأول : الفصل الثاني 


الخاصية ٣اع١0ا×N(a3‏ : و تستخدم لتعيين أقصى طول للحروف 2 
×180×€[ و تستقبل متغير من النوع |١‏ يحدد عدد الحروف . 

الخاصية ۷أ ألا : و تستخدم لعرض أو اخفاء الأدوات أثناء 
التشغيل › وتأخن قيمة من النوعء ۷/3۷ و هي توازي الخاصية 


ماvisib‏ 2ے تطبیقات ۴0۲۳ ۷|٣ 00WS‏ » آخیرا بمکنڪ تعدیل هذه 


الخاصية من خلال الشفرة بالطريقة التالية : 


الخاصية 30071¥ 5۸86| : و تستخدم لجعل بعض الأدوات للقراءة فقط 
> آرجو أن تلاحظ آن الآمر مختلف عند استخدام ٣۵٤‏ ع٤ء|‏ » على 
عكس ٥2٣۴ءا‏ يستطيع المستخدم التعامل مع الأداة و لكن لا 
يستطيع الكتابة فيها مثلا بإمكانه نسخ محتويات النص و ليس لصق 
النص .وهي تتعامل مع قيم من النوع 800|€37۸ . 

: HorizontalScorllbar و‎ VerticaIScrol|0ar jıتيصاخلا‎ 

كلا الخاصيتين تستخدم لعرض شريط التمرير › 

يمكن تعيين أريعة قيم لهنذه الخاصية إما €۸ ۸140 


۳ 
فز سيا 


آي مخفية أو visible‏ آو Auto‏ و هنا يتم د 


عملية الإظهار بشكل تلقائي عند كتابة النص › و 
أخيرا القيمة الرابعة و هي ١1€هء0i‏ و من خلالها لا يستطيع أن يرى 


المستخدم أي من هذه الأشرطة . 
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الجزء الأول : الفصل الثاني 


هناك خصائص أخرى تتعلق بالتصميم متJ style‏ و g Brushes color‏ 
لون الخلفية و الخطوط و قد تطرقنا لهذه الأمور جميعها و رأينا كيف يتم 
التعامل معها من خلال 8|6١١‏ » نصيحة إنسانية إذا أردت أن تتعامل مع 
التصميم لا تستخدم 10ل لاء أهاءألا فستجد نفس 2 متاهة لا يمكن 


ن تخرج منها إطلاقا دون التعامل مع XAML‏ . 


ثانيا الأحداث المشتركة : 


- الحدث كuا٣۴0أGe‏ و l0i ٣ 0cus‏ : الحدث الأول عكس الحدث التاني 
فالأول يتم إطلاقه عندما تحصل الأداة على التركيز › آما الأخر فيتم 
إطلاقه عندما تخسر الأداة التركيز › فكر ب2 ×18×80 التي تتعامل معها 
Wİtte٣‏ مثلا عند عملية البحث ستجد كلمة 563۲٤۲۸‏ عندما تضع 
مؤشر الفأرة داخل ×0 16×8 ستلاحظ اختفاء كلمة 53۲٣٣‏ و هنا أطلق 
الحدث ۷Sا۴۳0۴۳أ6€‏ و عندما تخرج من ×18€×60 دون كتابة أي ڪلمات 


تعود كلمة ۸٣٤3۲ع5‏ مجددا وهنا تم إطلاق الحدث SكUا٣٤۴0اء10.‏ 
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الجزء الأول : الفصل الثاني 


- الحدثين K€۷/00W۷١‏ و طلا۷عK‏ : يقع الحدث الأول عندما يقوم 
المستخدم بالنقر على زرمن لوحة المفاتيح و قبل آن يرفع أصبعه من الزر 
»و أما الحدث الثاني فيقع عندما يرفع المستخدم يده من لوحة المفاتيح › 
مثلا يمكن آن تقوم بعمل أمر ما عندما يقوم المستخدم بالنقر على زر 


enter‏ من لوحه المفاتيح » الشفرة: 


private void TextBox2 KeyDown(object sender, 
KeyEventArgs e) 


{ 
if (e.Key == Key.Enter) 


{ 
MessageBox.Show(" hi "); 


1 


O0 N QQ U ظ۳‎ U N دإ‎ 


لاحظ ے2 الشفرة التى 2 الأعلى أنى أستخدم المتغير € لتعقب حركة 
المستخدم » سيقع هذا الحدث عند عملية النقر على زر E١€۲‏ و قبل رفع 
يديه من لوحة المفاتيح › حاول آن تقوم بنفس الأمرو لكن بعد عملية النقر ! 
= لدینا الحدثین €۲† Mouse EN‏ و leaveاMouse‏ : یقع الحدث الأول 

عندما يكون مؤشر الفأرة فوق الأآداة مباشرة » أما الحدث الثاني فيقع 


عندما يخرج مؤشر الفأرة من نطاق الأداة . 
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الجزء الأول : الفصل الثاني 


- i™>دiث g :MouseDown and MouseUp (left and right)‏ 
هي تقع عندما يقوم المستخدم باستخدام زر الفأرة الأيمن أو الأيسر › 
الحدث 00۷١‏ يقع عندما يتم النقر بزر الفأرة و قبل رفع الأصبع عن 
الزرأما الحدث الآأخرفيقع عندما يقوم المستخدم بإطلاق زر الفأرة و هو 
»> لاحظ هنا لدي أريعة أحداث اثنين 00۷١‏ للزر الأيمن و الزر 


الأيسرو اثنين ٥لا‏ للزرين الأيمن و الأيسرأيضا. 


ادات TextB0OX‏ ,و label g TextBlock‏ : 
جميع هذه الأدوات تتعامل مع النصوص سواء ب2 السماح للمستخدم بإدخال 
النصوص أو عرض النصوص عليه » حسنا لنيداً أولا ب ×€6×80] » حيث 
تسمح هذه الأداة بإدخال النصوص من قبل المستخدم مثلا سؤال المستخدم 

عن عمره أو اسمه .لح . 
- الحدث 1€×]١۸3١88‏ : و يقع هذا الحدث مباشرة عند تغيير محتوى 


×1€×80 و هو خاص بهذه الأداة . 


: label ıı 
تستخدم الأداة أ٤ ةا لعرض نصوص توضيحية على المستخدم مثل‎ 
تعليمات أو شيء من هذا القبيل › لا يوجد الكثير للحديث عنه ب2 هذه الأداة‎ 
فهي بسيطة جدا و أكثر الأدوات شعبية 2 جميع التطبيقات تقريبا › و‎ 


لکنھا 2 ٤۸عاااعمvاأS‏ مختلفة جذريا © . 
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الجزء الأول : الفصل الثاني 


الخصائص : 

- الخاصية ۸۲ ع٥۲١00‏ : على عكس أع0ه| العادي 2 تطبيقات ا456.۸6 
و تطبیقات ۴0۲۳ ۸00WS‏ |۷ ليس لدينا هنا خاصية أ×1€ لهنه الأداة 
> عوضا عن ذلك لدينا خاصية اسمها 0۸18١‏ وهي خاصية يمكنها 
أن تحتوي على آي شيء ۱ نعم آي شيء حتی آدوات آخری مثل 5۷)0١‏ 
و صناديق نصوص آخرى ١‏ » شفرة )۸۸۷ التالية ستوضح لڪ ڪيف 
بإمكانك أن تضع ١0ا0‏ داخل أداة أ06 4| » الشفرة : 

<sdk:Label Height=" 89" 


HorizontalAlignment="' Left" 
Margin="78,140,0,0" Name="label1" 


VerticalAlignment=" Top" Width="250"> 
<Button Height="64" Width="136'> 
</ Button> 

</sdk:Label> 


الأداة )عoاB×عا‏ : و هى الأداة الموازية لأداة أ٥طهة|ا‏ 2 تطبيقات 
Windows 0M‏ و تطبيقات 50.۸1€ » أحداث هذه الأداة متطابقة 
كليا مع القائمة 2 الأعلى » يمكنك استخدام الخاصية أ×1€ للحصول 


على قيمة ما . 
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الجزء الأول : الفصل الثاني 


الأآداتین ×0 Che c)8‏ و radi Buttun‏ : الأولی تستخدم للحصول علی 
عدة خيارات و الأخيرة تستخدم للحصول على خيار واحد من مجموعة 
خيارات » لا يوجد آي جديد بے هذه الأدوات بالنسبة د ا۸٣‏ عاا٣ع۷اا؟‏ أحداتثها 
أيضا هي نفس الأحداث السابقة تقريبا اختلاف بسيط فقط 2 التسمية 
للحصول على قيمة هذه الأداتين بدا .IısChecked تحبصi Check ja‏ 

الأداتين ×160ءأا و ×0اطاصمع : حسنا هنا لدينا اختلاف جذري 2 
كلتا الأداتين عند مقارنتهما ب ۴0۲۳ W| ۸40۷S‏ »أولا ×180ء أا أصبح 


اقرب إl” cw „ FlowLayoutPanle‏ = ڪج 


ee 


4 نفس الوقت هي ×150ءاا » 


بمعنی آنه يمکن أن تحتوي هذه 


الآأداة على أدوات أآخرى و ب2 نفضس 


الوقت تحتوي على قيم نصية › أما 

K0 ۳0 00×‏ فقد أصبح بإمكانك آن تجعلها تحتوي أيضا على العديد من 

الآدوات كما تم اضافة حدثين جديدين ئلد ×0طاصطصهع و هما 
DropDwon cose‏ و يطلق عند إغلاق القائمة و أما الحدث الثاني 

rop own 0pen‏ فيطلق عند فتح القائمة مباشرة » يمكنك إضافة 

عناصر إلى هاتين الأداتين عن طريق الخاصية |6۳١5‏ »و أعتقد طريقة 

الإضافة بسيطة جدا › بالنسبة للإضافة من خلال الكود هي نفس الشفرة 2 


تطبیقات ۴0۲۳ ۸۵00Ws‏ |۷ آو تطبیقات 50.۸6€ لم یتغیر شیء › مثال : 


" comboBox1.ltems.Add(" test"); 


39 


الجزء الأول : الفصل الثاني 


الأآداتان أ6 و D6٣4‏ : حسنا هاتان الأداتان من أكنر الأدوات التي 

ستتعامل معها » خصوصا الأداة التانية عند الحديث عن قواعد البيانات › 

بنسبة للأآداة الأولى و هي 6۲١۵‏ فهي أداة يمكنڪ من خلالها أن تضيف لها 

مجموعة من الأدوات › وهنا يجب الحديث عن جزء أخر من عملية التصميم 

> لنفترض أن لدیک )]0١‏ ل6 علی 

الشاشة هناك شيء يسمی بمقايیض 

التحكم و هيا آريعة مقابض لكل آداة 

(الصورة على اليمين) › أحد عيوب 

ightاerاSİ‏ آنه لیس بالضرورة ما 

تراه أثناء التصميم هو ما ستراه أثناء 

التنفين » اسحب ال ١0لا8‏ إلى الأسفل ثم إلى أقصى اليمين مع ملاحظة 

آن تجعل المقابض المفعلة المقبض بالجهة اليسرى و المقبض 2 الجهة العليا › 

شخل التطبيق الآن » انظر إلى النتيجة › لم ينزل الزر إلى الأسفل ب2 أقصى 

اليمين كما من المفترض آن يكون › آغلق المتصفح و فعل هذه المرة المقبض 2 

الجهة اليمنى و المقبض ے2 الجهة السفلى › مع إلغاء المقابض العليا و 
اليسرى . آعد تشغيل التطبيق و انظر إلى الكارثة التي آمامك !! 

هناك حل لهذه المشكلة و هي تحديد حجم النموذج بحجم المتصفح عوضا عن جعل 

حجم النموذج تلقائيا › لكن ے2 هذا الحال ستعرض مشروعك بالكامل ے2 مواجهة 


مع سلاح الدمار الشامل 2 عالم تصميم صفحات الويب و هو طريقة العرض لدى 
المستخدم أو |0١5‏ ل |0؟ع ۸R‏ » إذا كان حجم العرض ے جهاز المستخدم يختلف عن 
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الجزء الأول : الفصل الثاني حح 
5 
vy‏ 

طريقة العرض ے2 جهازك ريما لن تجد آزرار آصلا و لن يجد آصلا صفحة 
ع ااerاSi‏ لكي يتعامل معها المستخدم. 
إذا من غير المجدي التفكير بتكبير النموذج › 
هذه المشكلة و هي عدم تحجيم النموذج ستولد اضافة 
كارخة آثناء تصميم النماذج الكبيرة نوعا ما € ا 
(انظر الصورة على اليسار) › ماذا تلاحظ ١!‏ نعم e‏ 1 


لقد أصبحت الآدوات متداخلة أثناء التصميم و 8 - 


0 0 ی‎ 
is 1 SOOO Miles; 


لكن الأمر ليس كما تراه أثناء التنفين »و هنا 

يأتي دور الأآداة 6۲۵ فبدلا من تحديد مقابض 

المحاذاة لكل عنصر على حده » يمكنك فقط أن تضيف مجموعة من الأدوات إلى 
0۵ معین و من ثم تهتم فقط 2 مقابض ال 6۲١۵‏ » هل تستطيع أن تحزر كم عدد 

ال أ۲ الموجود 2 الصورة على اليسار + © . 

الآأداة ١أ٣‏ 0336 : رغم التشابه الكبير 2 طريقة العمل لهذه الأداة مع شقيقتها 2 
Windows 0M‏ ل آنها مختلفة نوعا ما 2 طريقة التعامل مع البيانات › 2 

البداية ايبدأ مشروع جديد من نوع أ۸ع|۲ 5|۷6 و أضف كلاس جديد و ليكن بعنوان 
My ۴av0WebSite‏ (¥حظ آنک ستضیفه الی تطبیق ا۸ عاًااع۷اآك ولیس 

تطبيق 8 )ء ثم أضف هذه الخصائص لهذا الكلاس : 


public class MyFavoWebSite 


public string name { get; set; } 


public string link { get; set; } 
public bool isOnline { get; set; } 
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الجزء الأول : الفصل الثاني 


2 الصفحة الرئيسية لمشروع 3أ ۷6|أك و داخل مشيد الصفحة سنقوم يإنشاء 


كا من هذا الكلاس › مثلا بالمعلومات التالية : 


List<MyFavoWebSite> 
Li = new List<sMyFavoWebSite>(); 
MyFavoWebSite Number_1 = new MyFavoWebSite(); 
Number_1.isOnline = false; 
Number_1.link = "www.google.com"; 
Number_1.name = " google "; 


MyFavoWebSite Number_2 = new MyFavoWebSite(); 
Number_2.isOnline = true; 

Number_2.name = "Silverlight"; 

Number_2.link = "www.silverlight.net"; 


Li.Add(Number_1); 
Li.Add(Number_2); 
dataGrid1.ltemsSource = Li; 


لا تنسى أن تقوم بإضافة ۲|4 dat ag‏ إلى النموذج » شغل التطبيق الآن و انظر إلى 
النتيجة › أعرف لم يحدث أي شيء حتى الأن و لكن إليك قليلا من السحر › آظف 


هذا السطر قبل تحديد الخاصية ٣501۲٤٥٩٥۵‏ ]| بالشکل التالی : 


1: dataGrid1.AutoGenerateColumns = true; 
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الجزء الأول : الفصل الثاني 


قم بتشغيل التطبيق الآن » هل تغير الأمر » حاول تحريك الأعمدة و تعديل المحتوى › 
كل شيء أصبح معد كليا دون أن تكتب شفرة واحدة لتحديد طريقة العرض › 
هتالك المزيد من هذه المفاجتات ( بس صبرك عليا شوية © ) › آأكثر الأحدث 
تعاملا 2 هذه الأآداة هي ۸318€ e4٤‏ tءeاعء‏ و هي عنصر من نوع e٤‏ زط٥‏ › مثلا 
للعودة بالقيمة التي قمت بتحديدها ب2 مثالنا هنا › باستخدام سي شارب : 
private void dataGrid1 SelectionChanged(object sender‏ 
SelectionChangedEventArgs e)‏ , 


{ 


MessageBox.Show(((MyFavoWebSite)dataGrid1. 
Selectedltem).name); 


1 


جميل صحيح © » بما أن القيمة المعادة عبارة عن ا٤٥ 00j‏ فيمکنڪ تحويلها ڪما 


تشاء ›» و بما أن العناصر ب2 داخJ MyFavoWebSite caill ja Datagrid‏ 
لذلك جرى تحويلها لهذا النوع و من ثم يمكنك الوصول لخصائص هذا التصنيف 
كما يمكنك تعديل عناصر هذه الآداة بشكل يدوي عن طريق الخاصية 
mn7اectااC0‏ .» يمكنك تفعيل و إلغاء تفعيل الاختيار المتعدد عن طريق الخاصية 
Selection Mode‏ و التي تستقبل إما ۴×8۸۵٥۴۵4‏ و هيا الاختيار المتعدد أو 


ماng Si‏ و هو الاختیارالمفرد . 


آخيرا يمكن الحصول على بيانات الخلية المحددة دون كتابة شفرة سى شارب واحدة و 


هو ما سنراه ب2 الفقرة التالية عند الحديث عن 8|۸01 0a2‏ . 
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الجزء الأول : الفصل الثاني 


ضم البیانات بين الأدوات أو عہالہا8 هغل : 

رأينا 2 المثال الذي 2 الأعلى كيف يتم الحصول على البيانات من ل۲ 0a6‏ 
باستخدام سي شارب » هناك ميزة عظيمة أخرى 2 )۸۷× و هي ما تعرف ب هأه2ك 

Bi"‏ » حيث تمكتنك هذه الآخيرة من الحصول على بيانات الأدوات أثناء 
التصميم دون كتابة شفرة سي شارب واحدة . 
فكر منطقيا لماذا علينا استخدام شفرة سي شارب إذا كنا نرغب 2 نقل محتويات 
العنصر المحدد ے2 ٣|١‏ عهأهd‏ إلى ×80×€] مثلا » فكر كم حجم الشفرة التي 
ستكتبها لعمل ذلك »هنا تأتي فكرة i٣018‏ 433 › لتحل هذه المشكلة عوضا عن 
استخدام سي شارب أو ۷8 يمکن استخدام ]۸۷× لربط الأدوات ببعض و جعل 
عملية تناقل المعلومات آسهل بكثير و أن تتولى أ۸ عآأا٣ S۷6‏ السيتاريو السابق من 


الإفراغ و التعبئة من جديد › إليك كيف يتم الأمر : 


الأداة الرئيسية التي تحتوي الاداة التي سنأخْذٌ منها البياثات 
على البياتات المطلوية . ; 


الخاصية التي سنحصل منها على البياثات ي آي خاصية ستظهر هذه البياثات 
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الجزء الأول : الفصل الثاني 


لقد حاولت أن أبسط الفكرة قدر المستطاع » وفقا للصورة السابقة لنفترض 

آن لدينا السيناريو كما 2 الصورة التي على اليسار»› ما 

آريد عمله هنا تفعيل آو عدم تفعيل صندوق النص تبعا 

لتحديد الأّداة RadioButton Enable‏ » اذا لنقم بتفصیل العمل قلیلا › 

كما ے2 الأعلى : 

. ]€×80× الأداة التي ستتأثرأو تأخن البيانات هي‎ ١ 

. سيتم تنفيذ البيانات 2 الخاصية ٥ا2٣ عءا‎ ١ 

١‏ اسم الأداة التي سنأخن منها البيانات ۸R3d10 60١‏ وتحمل الاسم 
radEnale‏ . 


. |١٣۸۴ ٤٥) €٩ اسم الخاصية التي سنحصل منها على البيانات هي‎ ١ 


تتوقع حجم الشفرة لعمل هذا الأمر © » انظر الى السطر 2 الأسفل : 


مثال آخر ليكن لدينا أداة 5|۵6٣‏ و آريد أن آقوم 
بتغيير قيمة ×8€×60] هذه المرة يقيمة محددة 2 


٣eلااS.‏ (انظر الصورة على اليسار)ء لنرتب ماذا نريد أن نفعل : 
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الجزء الأول : الفصل الثاني 


الأآداة التی ستتأتر هى ×1€×80 . 
١‏ سيتم تنفين البيانات على الخاصية أ×€] . 
اسم الأآداة التى سنأخن منها البيانات 4€۲1|أ؟ . 


اسم الخاصية ع€uأ۷a‏ . 


فقط آضف السطر التالي إلى سطر صندوق النص 2 ۷1 ۸× : 


الآن لنعد إلى متالنا السابق و المتعلق ب 338٣١١‏ » هنا لدينا مشكلة › 
فعدد القيم التي يتم اختيارها هذه المرة ليست واحدة » ما آقصده هنا آن ڪل 
صف 2 38۲هل به ثلاثة قيم › ما أريد الحصول عليه هنا هو الخاصية 

٥ه"‏ » لعمل مثل هذا الأمر نحن بحاجة إلى طبقة وسيطة بحيث 
تستضيف هذه الطبقة العتنصر الذي ثم تحديده من ال 03138٣١١‏ » ثم من 
خلال هذا العنصر أستطيع أن أصل إلى الخاصية ۸3€ الموجودة فيه »› هذا 
العنصرالوسيط عبارة عن أ٥٣23م)Stac‏ . 


أPane Stack‏ هی اداة شبيھة جدا د E۲١٣۵‏ إلا آنھا تفرض علیڪ أسلوب 
ترتيب معبن للاأدوات التى بداخلها» هى مفيدة جدا عندما تريد التآأكد 
كليا من أن مجموعة من الأدوات لها ترتيب معين متناسقة 2 الطول و 


الارتفاع ۰ 


46 


۹ / 


الجزء الأول : الفصل الثاني 


2 المثال السابق دع 3138۲4 و شأنها » و لكن اضف 1€ ٤c)۴3‏ ها5 إلى 


النموذج و ضع بداخلها 18×80 » (انظر الصورة لشرح طريقة العمل) : 


العنصر الذي تم اختياره 


data grid 


Stackpanel 


لأخن البيانات من 4338۲ سنحتاج للخاصية ع" |4عاعماعS‏ » أما الخاصية 


المستهدفة 2 أ٥"‏ aم)عهSt‏ هي data Context‏ ›»الشفرة : 


1 


<StackPanel DataContext="{Binding 


2 ElementName=dataGrid1, Path=Selectedltem}"/> 


بعد الحصول على العنصر الذي تم تحديده سننقله إلى ×00أ×1€ و بما آنه 
Object‏ من النوع My av0 WebSite‏ بالتالي سيحتوي على الخاصية ۸3۳€ › 
إذا الخاصية التي سنحصل عليها من البيانات هي ۸۳€ و الخاصية التي ستتآثر 
هي أ×1€ » هنا لسنا بحاجة لتحديد المصدر لأن المصدر تلقائيا سوف يكون 


أStackPane‏ »الشفرة : 


' <TextBox Text="{Binding Path=name}" /> 
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الجزء الأول : الفصل الثاني 


4 نهاية الأمر تعتمد تطبيقات ۸عآاا ع5۷ بشكل كبير جدا على مفهوم هأةل 
i"i‏ لم يعد يقوم بضم البيانات بين الآدوات من خلال سي شارب أو ۷8 › لا 
أبالغ إن أخبرتك أنه من النادر جدا أن ترى مثل هذا الأمر يحدث 2 تطبيقات 
أاعiااeاSi‏ الجيدة على الأقل › لذلك من المهم جدا أن تفهم هذه النقطة › إذا لم 
أفلح 4 توضيح هذه النقطة راجع صديقنا الصدوق 600816 فستجد كم هائل من 
المقالات حول هذه النقطة . 


التحقق من البيانات و Data validation‏ 


الجزء الأخير من هذا الفصل سنتحدث فيه عن أحد الأمور الأساسية ب2 عالم 
1 اااeاSi‏ و هى التحقق من صحة البيانات › رآينا 2 الفصل السابق كيف تتم 
عملية ضم البيانات و |٣1١١‏ ه0 و الآن سنستخدم هذه التقنية » جعل 
Sieg‏ تقوم بشکل شىء عتا . 
لنفترض آن لدينا التصنيف التالى و الذي يمتل موظفض : 

public class Emp 


{ 


public string name { get; set; } 


public int age { get; set; } 

public string web { get; set; } 

public double salary { get; set; } 
1 


الجزء الأول : الفصل الثاني 
2 الخطوة التاليةه سنقوم بانشاء كائن من هذا التصنيف و سوف نقوم بعمليه 
118 لهذا الكائن 2 النموذج و ذلك 2 المشيد الرئيسي للصفحة › الشفرة : 


public MainPage() 
{ 


InitializeComponent(); 


Emp Omar = new Emp(); 
this.DataContext = Omar; 


ا 


3 - = سے‎ : 
5 ج ثم لدينا چ 1 ] 5 ۱ خڅ وڈ ف آرد‎ E € http localhost: O = &E Ûû XxX | € Datavalidation x] 


عناصر ×86×60[]» كل الصناديق تم عمل 
Binding‏ تھا مع خصائص الکائن 0۳3۲ › 
ي انظر إلى شفرة أا۸N×‏ و الصورة على اليمين 
للنموذج : 


<TextBox Text="{Binding name}"/> 
<TextBox Text="{Binding age}"/> 


<TextBox Text="{Binding salary}"/> 
<TextBox Text="{Binding web}"/> 


إذا قمت بتشغيل التطبيق الأن ستلاحظ ظهور الرقم ٠‏ عند حقلي العمر و الراتب . 
ما آريد فعله هنا هو التحقق من مدخلات المستخدم 2 حقلى العمر و الاسم بحيث لا 
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الجزء الأول : الفصل الثاني 


المتبعة للتأكد من أن البيانات المدخلة هي من النوعء |١]€8€١‏ هي 
تحويل القيمة إلى ۱١]888€۲‏ فإن تمت بشكل صحیيح لنكمل 2 الطريق 


و إن لم تتم العمليه بشكل صحيح نحبر المستخدم بضرورة تصحيح 
الآمر . ريما تكتب شيء من هذا القبيل مثلا : 
public bool CheckNumberAslInteger(string number)‏ 


{ 
Try 


{ 


int.Parse(number); 
return true; 


1 


catch { return false; } 


لکن انت الآن ہے عالم ا۸عاا٣٥۷آآ؟‏ حيث كل شيء أبسط مما تتخيل © » جرب 
فقط اضافة خlصيةa Data Binding pugڌı yJ! ValidatesOnExce pi0 1S‏ _2 


: بهذا الشکل إلى صناديق العمر و الراتب‎ » AM 


فقط ١‏ شغل التطبيق الآن و انظر إلى النتيجة وادعو لي © . 
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الجزء الأول : الفصل الثاني 


حسنا ما الفرق بين ترك مهمة التحقق إلى ا٣عآأ٣ع۷|أS‏ و بين أن تكون آنت المسؤول 
عنها › آستاذي العزيز بعيدا عن الشفرة مهما بلخت درجة لمستك الفنية 2 إبلاغ 
المستخدم بهذا الخطاً لن تكون أجمل من طريقة ا٣‏ عاأ٣ S۷‏ . بالإضافة طبعا إلى 
سهولة الشفرة كليا مقارنة مع شفرة سي شارب . 

حسنا لنكمل» بالنسبة لحقل الراتب ما زال لدينا مشكلة فآنا هنا أريد أن أجعل 
الراتب لا يزيد عن ٠٠٠١‏ ريال » الجزء الأول من عملية التحقق و المتعلق بأن القيمة 


لابد آن تكون رقما تم حلها و لكن بقي الجزء التاني. 


قبل آن نكمل 2 الجزء الثاني هناك خاصية يجب ايقافها 2 ۷5 › و هي خاصية 
enable just my code‏ و الهدف من إيقاف هذه الخاصية ھو جJa Silverlight‏ 
تعالج الخطاً و ليس ۷S‏ » لإيقاف هذه الخاصية توجه إلى < ١0|†م0‏ >< Tools‏ 
Debugging < Enable Jest My Code‏ و قم بإلغاء تفعیلھا اذا لم تظھر لک 
جميع الخيارات قم بتفعيل الخاصية ع٣‏ اء ااج 0Wا؟‏ (انظر الصورة 2 
الأسفل ). 


Import and Export Settings اھع عتا¿‎ 
ha | Wl Ask before deleting all breakpoints 
Keyboard 


Break all processes when ome process breaks 
Startup 


Task List Break when exceptions cross AppUomain ar managednatwe boundaries [f 
Task Lis 
: Enable address-lewel debugging 
Web Browser Î ‘eho dl : bly i 13913 lab 
ow disassembly ff source is wot available 
Projects and Solutions . 1 
. | Ênable breakpoint filters 
Source Lontrol 


Tait Either Enable the exception assistant 


Debugging ¥ Unwind the call stack on unhandled exceptions 


IntellîTrace | EÎ Enable Just My Cade (Managed only] 


Performance Tools 

Database Togls Warn f no user code on launch 

F# Tools Enable NET Framework source stepping 

HTML Designer | ¥ Step over properties and operators (Managed only) 

Office Tools Enable property evaluation and other implicit function calls 

Test Tools ¥1 Call stringq-conversion functian on objects in vafableê windows 
Tet Templating Ll 

Windga Forms Designer 


Y Show all settings e 


ل — - - . سے 
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الجزء الأول : الفصل الثاني 


سنقوم بتعديل شفرة سى شارب السابقة الخاصة بالكائن ۳۴ » بالشكل التالى : 


public class Emp 
{ 
public string name { get; set; } 
public int age { get; set; } 
public string web { get; set; } 


double salary; 


public double salary { 
get { return _salary; } 


{ 


if (value > 5000) 


{ 
throw new Exception("Salary Can't be more than 5O00 SR"); 


1 


_salary = value; 
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الجزء الأول : الفصل الثاني . 


7 
E E 


2 DataValidation 7 


ا : الواقع سوى طريقة التعامل مع الخاصية 


۷اهك لاحظ كيف تتم معالجة قيمة 


صفحة الويب 


۷اهةك و كيف يتم التأكد من آنها 


أكبر من 5000 إذا تحقق الشرط أقوم 
برمی ١10أم€٤×E‏ ومعه الخطاً » أعد تشغيل التطبيق الآن و أدخل قيمة أكبر من 


۰ و انظر ماذا بحدث ٩‏ بالنسبة لخاصية الاسم › يمكنك عملها بهذه الطريقة : 


string _name; 
public string name 
{ 
get { return _name; } 
set 


if (value.StartsWith("D")) 
{ 


throw new Exception("name can't start with Letter D "); 


1 


_name = value; 


مازال 2 جعبتى المزيد حول ۷803110١‏ هاه » لنكمل النقطة التالية : 
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الجزء الأول : الفصل الثاني 


ماذا إذا أردت أن تتحكم بعملية التحقق › مثلا تريد أن تظهر عنصر ×60×© 1 الذي 
يحتوي على الخطا بخلفية صفراء » هناك طريقتبن إما تعديل كأهةا5 الخاص 
بعملية التحقق من 8|6١4‏ كما رأينا » أو باستخدام سي شارب » لنجرب الآمر 
على ×860×€[ الخاص بالراتب »2 البداية علينا إضافة وسم و جعل قيمته ع٥ل۲]‏ 


إلى ×۲€×180» هذا الوسم يخبر ا۸ عآااع ۷ا5 بأنك تريد التحكم بعملية التحقق 


' NotifyOnValidationError=True 


طبعا يتم إضافة هذا الوسم بجانب الوسوم الآأخرى ے2 الخاصية 6|١1١‏ لأداة 
×180×€[ » بما آنك تريد التحكم بعملية التحقق › تذڪر شيء مهم دائما يمكنڪ 
التحقق من أداة معينة من خارج أداة أكبر منها بمعنى يمكنك التحكم ب ١ل‏ اأ 6u‏ 
موجود داخل ٣٤1‏ ة۴)عها؟S‏ من أم٣ة۴)عه5t‏ »و يمكنك التحكم بكل شيء على 
النموذج من خلال ك١أ6۲‏ طبعا التي تحمل الاسم 0٥۸00اا۷0ها‏ » من شريط 
الخصائص قم بالضغط على الحدث BindingValida t0^ ٤۲۲0١‏ ینطلق عند 
حدوث آي أخطاء 2 كل الأدوات الموجودة داخل هذه ال ك|أ٣8‏ . اكتب الشفرة 


التالية بداخله › الشفرة : 


if (e.Action == ValidationErrorEventAction.Added) 
{ 


(e.OriginalSource as Control).Background = 
new SolidColorBrush(Colors.Yellow); 


ToolTipService.SetToolTip((e.OriginalSource as TextBox), 
e.Error.Exception.Message); 


1 


if (e.Action == ValidationErrorEventAction.Removed) 


الجزء الأول : الفصل الثاني 


(e.OriginalSource as Control).Background = 
new SolidColorBrush(Colors.White); 


ToolTipService.SetToolTip((e.OriginalSource as 
TextBox),null); 


ا 


إذا عدت إلى شفرة )۸۷× ستجد أن ۷/5 قد أضاف وسم جديد للحدث » الشفرة: 


عند وجود خطاً هناك طريقتبن إما وجود الخطاً و هو يتمتل ب ۸0۵ أو انتهى 
الخطاً وهو يتمتل ب ۸١/١0۷٥8١‏ » ما أقوم بعمله هنا هو أن المتغير € لديه خاصية 
اسمها ٣1501۲۲۵‏ ع0۲ وهو عبارة عن كائن يمثل أي شيء يطلق هذا الخطاً و 
بما أني أريد معالجة الأخطاء التي تنطلق من أدوات ×1€×80 فالأخيرة عبارة عن 


0‰ فأقوم بتغيير لون الخلفية حيث تأخن الأآخيرةö Solid ColorBrush‏ 


كما رآينا ے2 ك0١ع|ا8»‏ أخيرا أضف 
٠ gg l_> |‏ 
ipP Service A2 LETEETEEEA CETTE 7‏ 01ا ومرر لھا الخطاً 


الذي وقع . 2 ۸۳0۷۴4 يحدث 
العکس أعید <×50×€] إلى اللون 
الأبيض و أجعل قيمة م100 فارغة › 
(انظر الصورة على اليمين) » هل انتهينا 
من Data valid a0٥١0‏ . كلا لم 


ننتهى بعد ( صبرك عليتا يا حلو © )› لنكمل . 


e 
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الجزء الأول : الفصل الثاني 


بقي لدينا نقطة أخيرة عند الحديث عن التحقق من البيانات و هي ملخص الأخطاء 
» باستخدام أدوات تسمىی ۸5103۲1۷ 10ا۷ یہمکنک عرض ملخص لکل 
الأخطاء التي وقع بها المستخدم أثناء تعبئة النموذج › ب2 البداية علينا إضافة 
sڪReferenc‏ إلى مشروع ۸اا ع۷اأS‏ حدد المشروع ثم انقر بزر الفأرة الآيمن و 
اختر Add References‏ ستظهر قائمة References‏ ابحث عن 


s.Data.lnputاs.ControئWindow. System‏ » ا#آن علينا إضافة هذا المرجع 
إلى الصفحة التي نعمل عليها أضف هن المرجع إلى الشاشة بالشكل التالي : 


7" 1 1 f“ 


xmlns:ds="[ 


mc :Ignorab az" system Windows,Automation (System, Windows] 


d:DesignHe) ım winfTxy/ Zl 
اا‎ ٣ System. Windows, Automation.Peers (System. Windows] e 

+4Grd xal System.Windows,Automation.Peers (System, Windows, Controls. Data.In put] ot Bindingv: 

4TextE î System. Windows,Auıtomation, Text (System, Windows] ight="23" Hf 


az" System Windows,Browser (System. Windows,Browser] 
<lextb az" System Windows, Controls (System, Windows] 
az" System Windows, Controls (System, Windows, Controls, Data,In put] 
+Textpg lê System. Windows, Controls,Primitives (System. Windows) tifyOnValidı 
az" system. Windows,Data (System, Windows] 


ht="23" Hor: 


أنزل إلى أسفل شفرة )۸۷× و قبل أن تغلق ل١6۲‏ فقط أضف آداة 
ValidationSummary‏ , 


1: 


<ds:ValidationSummary Grid.Row="4" /> 
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الجزء الأول : الفصل الثاني 


لاحظ أن 8۲١۵.۲٥W‏ تمثل عدد الآأخطاء التي يمكن أن تعرضها على المستخدم 2 
المرة الواحدة » عد إلى شاشة التصميم و انظر إلى أداة ملخص التحقق › حاول 
تصغير الأداة حتى ترى كل الأدوات من تحتها » هل تعلم ماذا تبقى » فقط قم 
بتشغيل التطبيق بالضغط على ۴5 . 


ا 

e 1‏ ا 
Th ok‏ ا DUataValidation‏ ك 80 > http://localhost:0393/DataValidation TestPagqe,aspx‏ 2 2 ۳ 1 س 8 
ست ا 

DD 

أسد اشد ةة 
5 
e‏ 


3 
راق الستخدم 


صتحة لويب 
EE‏ 
name name can't start with Letter D‏ 
age Input is not in a corract format.‏ 


salary Salary Can't be more than 5000 SR 
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۲ 


الجزء التاني: ۳ أعماق 
Silverlight‏ 


2 هذا الجزء ستتعرف على العديد من الأمور الأكثر تطويرا ے2 ٣۸‏ عاًاا S۷٥‏ متثل 


التخزين على جهاز العميل و قواعد البيانات من خلال أ۸عاااعvاآ؟S‏ و خدمات 
الويب و الوسائط المتعددة » سيشكل هذا الجزء نقطة تحول 2 طريقة تعاملك مع 
تطبیقات ۸۲ع اا٣‏ ۷ا5 ذلك كن مستعدا جيدا » أرجو أن تلاحظ أني لن أتطرق 
مثلا إلى ۸00.161 أو كيف يتم قراءة ملفات )۷× و ما شابه ذلك فهذا الكتاب 
ليس موجه لتعلم سي شارب أو ۸00.۸61 لنلك لابد أن تمتلك هذه الخبرات 


يعد الانتهاء من هذا الحزء يحب أن يضاف إلى معرفتک التالى : 


. تخزين البيانات على جهازالمستخدم‎ ١ 
. التعامل مع خدمات الويب‎ ١ 
. التعامل مع قواعد البيانات‎ ١ 


التعامل مع الوسائط المتعددة . 
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الجزء الثاني : الفصل الثالث ا( 


الفصل الثالث ٠:‏ 


تخزين البيانات على جهاز 
المستخدم 


إذا معنت النظر 2 الطريقة التي تستخدم لتسجيل الدخول ب2 كل المواقع تقريبا › 
آنت تقوم بتسجيل الدخول مرة واحدة على جهازك و 2 المرة القادمة عندما تدخل 
على الموقع يتم تسجيل دخولك تلقائيا » ما فعله الموقع هنا أنه قام بتخزين ما 
یسمی ب ٤٥٥k) e5‏ علی جھاز الزائر › للأسف ل تدعم 4 ۸۲ عاااع۷اآ؟ بشکل 
مباشر عملية الد كع ٤00)i‏ عوضا عن ذلك يتم استخدام كع أ)C00‏ الخاص ب 

أ€. sp‏ » ستتعرف بے هذا الفصل كيف تقوم بإنشاء ٤٥٥) es‏ خاص يڪ و 


كيف تقوم بالقراءة و الكتابة داخل هذا الملف . 
يعد الانتهاء من هذا الفصل يحب أن يضاف إلى معرفتك التالي : 


. lsolatedStorage File yl التعرف‎ 


ه الكتابة و القرIءة‏ ڊlسwتخaIlı lsolatedStorageFile‏ . 


سسس ) 
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الجزء الثاني : الفصل الثالث 


IsolatedStorageFile JİjE التعرف‎ 


حسنا ما هو Storage ۴|٤‏ tedها0ءا‏ » باختصار شديد هو طريقة أو آلية تمكنڪ 
من تخزين ملفات على جهاز المستخدم » سواء كانت هذه الملفات 1٥×‏ أو ×٧)‏ أو 
آي نوع ملفات خاص دك » لديه سلوب خاص بالقراءة و الكتابة كما سنری ¥حقا 


2 هذا الفصل . 


هناك مشكلتين عند التعامل مع هذ النوع من الملفات › أولا لا يسمح لك بكتابة 
ملفات آڪبر من ۲ ميجا » آيضا تذكر دائما آن أماكن تخزين هذه الملفات سهل جدا 
العتور عليها لذلك عند تخزين كلمات المرور عليك دائما أن تتذكڪر بضرورة 
تشفيرها › أيضا إذا كانت المساحة التي ستكتب بها الملف غير كافية سيطلق 
)عاااعاأS‏ خطآ بشكل مباشر » أخيرا يمكن للمستخدم أن يمنع كتابة أية ملفات 


على جھازه بکل سهولة آو حتی آن يسمح لك بالوصول إلى القرص الصلب ے2 جهازه 


لدی |۴ Storage‏ tedهاoءا‏ العديد من الطرق أهما ما يلي : 


اسم اريه 


DeleteDirectory 
DeleteFile 
DirectoryExists 
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هناك أيضا العديد من الطرق الآخرى » يمكنك مراجعة ملفات 
50 للحصول على معلومات أكتر . 


الكتابة و القراءة باستخدام IsolatedStorageFile‏ . 


لنفترض آن لدينا ×60×€] و أاداتين ,س 
Button‏ الأول لحفظ محتويات النص و 
الآخر لتحميل محتويات النص › (انظر 
الصورة على اليسار )» ما أريد القيام به هناء 
حفظ قيمة هذا الصندوق على جهازالعميل 


»ثم قراءة هذا الملف عند النقرعلى زر 1030 › لتبدأ عملية الكتابة . 
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الجزء الثاني : الفصل الثالث 


ستقوم بإنشاء طريقة لكتابة الملف و هي بسيطه جدا جدا إذا كنت تعلم 
كيف يتم التعامل مع ع W٣‏ ۳هعr‏ )5 من قبل ( تأكد من استدعاء 
فضl« system.|O0 «lewî‏ ,و System.lO.IsolatedStorage‏ ( « 


اليك الطريقة : 


private void SaveData(string data, string fileName) 


{ 


using (IlsolatedStorageFile isf = 
IsolatedStorageFileStream (fileName, File Mode.Create, isf)) 


{ 


using (StreamWriter sw = new StreamWriter(isfs)) 


{ 
sw.Write(data); 


sw.Close(); 


حسنا لا تنصدم من طول الشفرة فكل ما ب2 الأمرأني أكتب ملف له اسم يتم تمريره 
و لديه بيانات يتم تمريرها أيضاء ثم انشا ڪائن من lsolatedStorageFile‏ و 
الذي بدوره يقوم بإنشاء الكائن ١6أ١W۲‏ ۳ ه5۲۴ حيث يتم الكتابة » يمكن العودة 
إلى موقع 15S0 ١N‏ للمزيد من المعلومات عن «Stream WIt€r‏ 


الخطوة التالية هى تنفيذ هذه الطريقة › قم بإنشاء حدث )i|cا€‏ للأداة Bu t00‏ و 
استدعىي الطريقة ومرر لها البيانات الموجودة 2 صندوق النص مع اسم الملف و ليكن 
est . ×)‏ »الشفرة : 
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private void button1 Click(object sender, 
RoutedEventArgs e) 


{ 
SaveData(textBox1.Text, "test.txt"); 


شخل التطبيق و جرب الأمر» لن ترى شيء يحدث › و لكن إن ذهبت إلى المسارالتالي : 
C:\Users\<UserName>\AppData\LocalLow\Microsoft\‏ 
Silverlight\is‏ 

ثم بعد مجلد 5| ابحث عن مجلد التطبيق 

الخاص بك ستجد ملف أ×.ا€5] الذي 

قمنا بكتابته و به النص الذي قمت بكتابته 

2 ×1€×180 ( انظرالصورة على اليسار) . 

لاحظ آن مكان كتابة الملف يختلف من جهاز إلى آخرو لا تستطيع الحصول على 
مسار موحد لذلك عليك آن تبحث قليلا عن الملف ب2 مجموع المجلدات الموجودة 


داخل 5| . 


O‏ عند بحت عن السار المذكور آعلاه قد تحتاج إلى عملية اظهار 


مجلد 033 مم۸ » حيث يكون هذا المجلد مخفى افتراضيا › 
لذ ٽڪ يحب علبڪ اظهاره ولا . 


خا 
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الجزء الثاني : الفصل الثالث کر ر 5 


الآن لنحاول القراءة من هذا الملف › قم بكتابة الطريقة التالية : 

private string LoadData(string fileName) 
{ 

string data = String.EMptYy; 

using (IlsolatedStorageFile isf = 

IsolatedStorageFile.GetUserStoreForApplication()) 

{ 

using (IlsolatedStorageFileStream isfs = new 
IsolatedStorageFileStream (fileName, File Mode.Open, isf)) 

{ 


using (StreamReader sr = new StreamReader(isfs)) 
{ 
string lineOfData = String.EMptYy; 
while ((lineOfData = sr.ReadLine()) != null) 
data += lineOfData; 


1 


return data; 


هذه المرة لدينا €۲ Str ea R€3‏ بد ¥ من €۲ trea Writ‏ آیضا تعدیل 
الطريقة £ |5۲ بدلا من كونها ۷/014 › انشا حدڀ Button alدî A CIİCK‏ 
المسمى 1030 واستدعي الطريقة › ثم مرر لها اسم الملف و اجعل القيمة المعادة 
توضع 2 صندوق النص ›الشفرة : 


' textBox1.Text = LoadData("test.txt"); 
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الجزء الثاني : الفصل الثالك ”°7 


شغل التطبيق الآن و انقرعلى زر 1030 هذه المرة و انظر للنتيجة . 

هنا لدينا مشكلتين لنبدأ مع الأولى » قم بتشغيل التطبيق وانقر بزر الفأرة الأيمن 
ستظهر لك نافنذة اعدادات ۸٤‏ عاااSilve‏ حدد اlتبgيب‏ €£aٽثstO0 Application‏ « 
ستلاحظ ملف كع K0)‏ الذي قمت بكتابته 2 القائمة › أسفل هذا التبويب قم 
بإلغاء الخيار Enable appاicati0¬ S0 ۲a£€‏ . هذه المرة لن يتم تنفين التطبيق 


عوضا عن ذلك سترى نافذة 06016۲ المشئومة »(انظر الصورة 2 الأسفل ) . 


| [Manually choose the debugging engines. 


Do ¥oii want to debug using the selected debiigger? 


tes | | Mio 


لحل هذه المشكلة » تذكر دائما أن تضع أي محاولة للكتابة أو القراءة داخل جملة 
can‏ - ۲۷ا » سأآعيد طريقة الاستدعاء ب2 العنصر 1030 مثلا » بشكل التالى : 


textBox1.Text = LoadData(""test.txt"); 
1 


catch (Exception Error) 


{ 


MessageBox.Show(Error.Message); 


ا 


الجزء الثاني : الفصل الثالث 


المشكلة الأخرى إذا لم يكن الملف 2 الأصل موجود ! و لحل هذه المشكلة يمكنك 
استخدام الطريقة كأ؟ا×۴ع|أ۴ » مرر لها اسم الملف » حيث تعيد هذه الطريقة ع٥ل۲]‏ 


إذا كان الملف موجود أو 35€ إذا كان الملف غير موجود » بهذه الطريقة : 


IsolatedStorageFile store; 
store = lsolatedStorageFile.GetUserStoreForApplication(); 
if (store.FileExists("test.txt")) 


{ 
textBox1.Text = LoadData(""test.txt"); 


ا 


أما عند حذف الملف لنفترض ے2 حالة أن المستخدم قرر نسيان بياناته مثلا » يمكننا 
استخدام De et e۴٥‏ »الشفرة : 


IsolatedStorageFile store; 
store = lsolatedStorageFile.GetUserStoreForApplication(); 
if (store.FileExists("test.txt")) 


{ 


store.DeleteFile("test.txt"); 


ا 


رآينا 2ے هذا الفصل كيف تتم تخزين الأمور 2 ا٣‏ عاااع۷آآ؟ . و ما هى الآأخطاء 
التي من الممكن آن تقع آثناء عملية الكتابة و القراءة و كيف تمت معالجة هذه 
الآأخطاء » استخدمنا 2 هذا الأمر الكائن ٥ا۴‏ 05)0۲386عاهامءا و الذي يتيح 


لك خدمات انسانية جليلة . 
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الفصل الرابع : 
الوصول لخدمات الويب 


لقد رأينا كيف أن تطبيقات ا۸ عآًا٣۷6|أS‏ عبارة عن تطبيقات يتم تنفيذها على 
جهازالعميل و ليس على جهة المستخدم ١‏ ماذا يعني هذا › بكل بساطة هذا يعني آنڪ 
لن تستطيع تنفين شفرات الاتصال بقاعدة البيانات متلا مباشرة من خلال 
أighاerاSi‏ لنلك علي أن تضيف طبقة أخرى و هنا يأتي دور W۵ 5S€۲۷1٤٥€‏ 
> ما سنتحدث عنه ب2 هذا الفصل عبارة عن مقدمة للوصول للفصل القادم وهو 


الحديث عن قواعد البيانات . 


بعد الانتهاء من هذا الفصل يحب آن يضاف إلى معرفتک التالى : 


. web se€erVİCe ةãمدخ |نشاء‎ ® 

الوصول لخدمات الویب عن طریق † Sil verg ۸N‏ . 
e‏ الحدث A۸5۷۸٥‏ . 

التعامل مع الحدث comple‏ . 


ug رہ‎ 
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حسنا لنبدأ » سوق أبدأ مشروع جديد من "۸عاا٣ه‏ ۷ا5 و ليكن اسم المشروع مثلا 
webserviceExm|‏ 2 صفحة اighnاverاSi‏ فقط قم بإضافة ١0ا8‏ و 
۲€×X80×‏ ے4 منتصف الصفحة مثلا › بما أننا سنتعامل مع WebS€۲›C|Ce‏ » إذا 
سننتقل إلى الطرف الأخر من المشروع هذه المرة وهو أ٣‏ €ز۲0م اعمس .2 مثالنا هنا 
سیكون اسم هذا المشروع ١۱.۷٤6‏ ×٤عء‏ ۷ا مكاعم . اضغط بزر الفارة الأيمن و 
اختر اضافة ثم إضافة ملف جديد من نوع ۷8658۲۷٤٥۵‏ ( يمكنك البحث من 
الأعلى عن (WebService‏ ولیکن اسم الملف الجديد 


. 0) ثم اضخغط علی‎ Sending Ema Service.asMmx 


## To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
## [System.Web. Script. Services. Scriptserv ice ] 
public class WebServicel : System.Web. Services .WebServyice 


[WebMethod ] 
public string HelloWorld({} 


1 
1 


return "Hello World"; 


حسنا لنأتي إلى تفسير هذه الطلاسم » لاحظ التعليق 2 الأعلى › و الذي يخبرك 
بآنك إذا آردت الوصول إلى هذه الخدمة من خارج هذا التطبيق عليك تفعيل 
السطر الذي ب2 الاسفل » إذا الخطوة الأولى هي إزالة علامة التعليق لجعل هذه 
السطر من الكود » واحذف الطريقة ۷0٣١4‏ ٥|اآام۳‏ بما بے ذلك كلمة 

N ebMeth00[‏ ]اننا سنقوم بإنشاء طريقة تقوم بإرسال بريد الكتروني › إليك 


e 


شفرة الطربقة : 
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public bool SendingEmail(string emailfor) 


{ 
System.Net.Mail.Mail Message MyMailMessage = new 


System.Net.Mail.Mai| Message ('Jwرkا‎ ıı", emailfor, 


لوصولڪ كثيرا احيك العزيز صديقي , 'سيلفرلايت من مرحبا. 
;( "هذه النقطة 2 الكتاب » جميل جدا تابع إلى الامام 


MyMailMessage.lsBodyHtml = false; 
System.Net.NetworkCredential mailAuthentication = new 
System.Net.NetworkCredential(" كلمة المرور ,"بريدك الكتروني‎ 


;("الخاصة بك" 

System.Net.Mail.SmtpClient mailClient = new 
System.Net.Mail.SmtpClient("smtp.gmail.com", 587); 
mailClient.EnableSsl = true; 
mailClient.UseDefaultCredentials = false; 
mailClient.Credentials = mailAuthentication; 

Iry 

1 

mailClient.Send(MyMailMessage); 

return true; 


ا 


catch { return false; } 


ا 
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تستقبل هذه الطريقة البريد الخاص يمستقبل الرسالة لا حظ آأنك إذا آردت تنفيت 
هذه الطريقة ستقوم بتخيير كلمة المرور و المرسل لهذه الرسالة › آيضا لابد أن يكون 


البريد أأE۳"3‏ لأنه مجاني فيما يخص م١51‏ قم ببناء المشروع من القائمة 4|أUا8‏ 


أو من خلال 8 + ا؟ا؟ + CR)‏ » بعد أن تنتهي من هذه التعديلات عد إلى 


و و 
To see a list of available services on a specific server, enter a service URL and click Go, To browse for available‏ 
services, click Discover.‏ 
Address:‏ 
http:#/localhost:55532/WebServiceExmpl.asmx ¥ | Gn‏ 
eryices: Operations:‏ 
OL WlebServiceExmpl.asmx‏ 


1 service(s) found in the solution. 


Namespace: 


SendingEmailServices| 


آآ ا Add Service Reference‏ 
س و هد 


Silverlight‏ حدد Silverlight zai‏ و 
انقر بزرالفأرة الأيمن و اختر الخيار 44١‏ 
Service Reference‏ ستظهر لڪ 
نافذة إضافة خدمات الويب ( انظر 
الصورة على اليمين) › انقر الزر 
e ٣‏ 0كا حتى يتم إيجاد الخدمة التي 


قمنا بعملها قبل قليل › لا حظ نڪ ٳذا لم 


تقم بتفعيل التعليق كما آخبرتك سابقا لن ترى هذه الخدمة ے2 هذه الشاشة « 


من صندوق النص بالأسفل غير اسم فضاء الÎسnاء SendingEmailServices JJ!‏ 


> ثم اضغط على موافق › سيقوم عندها ۷5 بتوليد شفرة الخدمة بالكامل »و لا يبقي 


لك سوى استخدام هذه الخدمة . 
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ستلاحظ إضافة مجلد جديد يحمل الاسم S٥۲۷1٤٣١‏ 
Solution Explorer TOX‏ 
اقا ی | 
References‏ و بداخله الخدمهة الحديدة التى همت سناتها la] Solution 'webserviceExml' (2 p‏ 
E webserwiceExrmnl | 8 o. .‏ ۴ 
|Z] Properties‏ » 
٠ +‏ مھ ıê] References + » * +“ & e ٠»‏ : 
قبل لحظات ) انظر الصورة على اليسار ) ٤‏ الان کم بالنقر على i. References‏ ۳ 
SendingqEmaıllSerwic‏ & 
Ap p.xaml 8‏ ا 
اد B100‏ الذي قمت بإضافته على الصفحة الرئيسية 2 MoinPogexem‏ | 
i ServiceReferences.Clier © 9‏ 
A l2 webserviceExml.Web‏ 
2 م = آّ 3 )اچ “هه Properties‏ ]| : 
البداية لتوليد الحدث ٤٣K‏ |أ٤‏ » بے أعلى الشاشة يجب عليك 
jg ClientBin‏ : 
u 1‏ ءِ Silverlight.js OF ٠‏ ]3 
£1 اں دعوم باستدعاء محال الاسماء الذي قمتا بانشاته من eg E‏ 1 
بک آ قا کی ا Db‏ 


خلاJ Add Service References‏ »ے2 على شاشة الشف دة ”٣ا٣ت‏ ك | 
أضف المشروع ۷€۲ كفضاء أسماء حتى تستطيع الوصول 
لهذه الخدمة التى قمت بإنشائها قبل قليل » بالشكل التالى : 


اللآن توجه إلى الحدث [٣)‏ » ما سنقوم به 2 الشفرة التالية هو إنشاء كائن من 


النوع NebServiceExmplSoap Clie n‏ من خلال هذا الکائن تستطیع الوصول 
لكل الطرق الموجودة 2 الخدمة التي قمت بإنشائها 2 مشروع الويب كما رأينا 
سابقا. قم بإنشاء كائن جديد من هذا النوع > تم حاول استخدامه للوصول 


للطريقة التي قمنا بكتابتها فيه » ماذا تلاحظ 5 
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صحيح لم تحد هذه الطريقة !! اذا 5© السبب هتاك قانون ينص على الآتي " آي 
طريقة تريد الوصول لها موجودة 2 €٥٤أ۲۷ع5 ٥‏ لابد وأآن تكون مسبوقة بالوسم 
]NebMethod[‏ . للك لنعد لمشروع الويب و لنضف هذا الوسم فوق الطريقة 


التي قمنا ببنائها سابقا » (انظر الصورة 2 الاسفل للتوضيح أكثر ) : 


س س س س س س س ت س س س س س س س 


[WwebMethod ] 
public bool SendingEmail( string emailfor) 


1 


System.Net.Mail.MailMessage MyMailMessage = 


الآن أعد بناء التطبيق من جديد » إذا حاولت مجددا الوصول لهذه الطريقة لن تفلح 
> عليك أآولا تحديث الخدمة بے جهة ا۸ عاااع۷اآS‏ » لذلك اذهب إلى مجلد 
ئى Service Referen‏ و حدد الخدمة التي قمنا بإنشائها سابقا انقر بزر الفأرة 
الآيمن و اختر Service References‏ dateم‏ » سيظهر آمامڪ معالج 


التحديث » انتظر لحظات حتى الانتهاء . 


بعد أن ينتهي معالج التحديث من تحديث الخدمة › عد مجددا إلى الحدث )ءا و 
حاول الوصول للطريقة السابقة من خلال المتخير الذي قمنا بتعريفه سابقا » هذه 
المرة سترى آنه بإمكانك الوصول للطريقة السابقة بسلا | "اك ج 

( انظر الصورة على اليسار )ء و لكن الأمر مختلف قليلا» | بست 


دعنی آشرح الفكرة 1 : Tsing‏ @ 
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لكل طريقة تقوم ببتائها 2 ملف ١عء٤أ۲۷ N8656‏ يتم إنشاء طريقة للوصول لها 
تنتهي بكلمة ۸5۷١٠٥‏ » وعندما تنتهي من تنفين هذه الطريقة نكتب بعدها حدث آخر 
ينتهي بالكلمة كععأمC0۳‏ . استدعي الطريقة ١d1 ۸8۴۳31|۸5۷۸۲٥°‏ 5€ ومرر 
لها قيمة ×۲6€×80 » ثم قم بتفعيل الحدث ۴4٤اء‌ام۳٥C٤‏ بعد آن تکتب 
etedاComp Sending Email‏ خن مسافة واحدة و اكتب علامة زائد و بعدها 
علامة يساوي › ثم انقر على زر 30 مرتين متتالية من لوحة المفاتيح مباشرة لكي 


يتم توليد شفرة الحدث بشكل آلي . من المفترض آن تكون شفرتك الآن بهذا الشكل : 


private void button1 Click(object sender, RoutedEventArgs e} 


WebServiceExmplSoapClient SedingEmaî 1Soap 
= new WebServiceExmplSoapClient{ } 3 
sedingEmailSoap.sSendingEmailAsynce (textBox1. Text} ; 
sed ingEmaîi lSoap.SendingEmailCompleted += new EventHandler<sendingEmailCompletedEventArgs+(SedingEmai1Soap_SendingEmailCompleted} ; 


1 


vwoid SedingEmailSoap SendingEmailCompleted{(object sender, SendingEmailCompletedEventArgs e) 


{ 
1 


throw new NotImplementedException( } ; 


يقع الحدث 4عاعامصهع معندما تنتهى ا١عااام۷ااكS‏ من تنفين الطريقة 
Sending Ema AًSYync‏ مباشرة » آما عن النتائج المعادة فيتم وضعها 2 الخاصية 


ااresu‏ الخاصة بالمتغير € الخاص بالحدث Complet€4‏ . 


اللآن لنكمل ما أريد أن أفعله هنا وهو إلغاء تفعيل ×50×€] و 0۸لا مباشرة بعد 
استدعاء الطريقة 586١۸0۸8۴ ۸١31۸5۷۸٥‏ » ثم أعيد تفعيلهما بعد تنفين الطريقة 


استدعاء الطريقة مباشرة لإلغاء تفعيل الأدوات : 
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و ذلك داخل الحدث <€ » نأتى للطرف الآخر من المعادلة › إلى الحدث 


dعetاC0mp‏ الشفرة : 


if (e.Result) 
{ 


;(" بنجاح البريد ارسJl‏ ت۾م MessageB0ox.Sh10°W("‏ 


ا 


else 


{ 


;(' ): بنجاح البرید ارسال يتم 3۾ MessageB0x.SN0W(" Ie‏ 


1 


textBox1.lsEnabled = true ; 
button1.lsEnabled = true ; 


لا آستطيع أن آشرح شىء 2 هذه الشفرة » اضغط على ۳5 لتجربة التطبيق › ادخل 
بريد المرسل إليه ب2 ×۲8×180 » من المفترض أن يعمل التطبيق بسلام © . 
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SIE http:/flocalhost:55532/webserwiceExmITestPagê.aspx‏ ا 


7 
چ 


|| 6 إعادة توجيه 


کر لآيت عودة إلى رسال 
اء تجصع الرسال خب العحاخات. 

Abdul Rahman ALG) 

a aa i 


GDA MOWINOOWSIIVE. CO 


a.alqabba 


send email 


49 
extBd‏ 3 
uttor‏ 
ريز احجيك كتثيرا توصوفنك هته التقطة في الكتاب ,۽ جفيل جدا تايع إتى الامام 
sedir’‏ 
اوعد ا„ E‏ = ا چ eı lk E, — ali‏ کر 
f {eq‏ 
نع ارسال البريد بنجاج 


Windows Live Messenger dê 


+ ا 
١‏ 7 فمن gb N207۳‏ مرحبا من سیلفرلایت 


6302011 


حسنا لقد اجتزت خطوة جدا مهمة ے تطبيقات ۸ ع اا٣‏ 5|۷6 لا بالغ إن آخبرتك 
بأن ما يقارب 140 من التطبيق سيكون ے2 مشروع N٥‏ و ليس ے2 تطبيق 


اhعiااeاSi‏ عندما يأتى الحديث لقواعد البيانات أو مثلا رفع الملفات أو إرسال 
لبريد إلكتروني ...الح . 
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لقد تعرفت 2 هذا الفصل كيف تستطيع التواصل مع خدمات الويب » و كيف 
تستطيع بناء واحدة و استخدامها » و كيف تستطيع استيراد هذه الخدمة إلى 
تطبیقات ۸۲ع اع S۷‏ » لقد تعمدت آن ا آکتب الوسم [ ]Neb N e۸٥1‏ حتی 
أجعلك تستخدم الخاصية Service Refer ¬C€5‏ dateمل‏ و التي فعلا تقدم 
لك خدمة جليلة جدا لن تستطيع آن تفيها حقها من الشكر . قم بتفحص البريد 


الذي آرسلت له الرسالة و إلى الخطوة التالية . 


O‏ اذا آردت تجرية الشفرة المرففقة لهذا الفصل »› لا تنسى آن تقوم بتغيير البريد 


الالكترونى و كلمة المرور 2 الطريقة أأ3٣‏ 56۸01۸8۴ الموجودة 2 خدمة 
الويب . 
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الفصل الخامس :0 
الوصول لقواعد البيانات 


لقد تعرفنا 2 الفصل السابق على خدمات الويب › و رآينا كيف يتم التعامل مع 
خدمات الويب من خلال ۸عاااعvااS‏ » 2 هذا الفصل سنستخدم ما تقدم 2 
الفصل السابق لكي نرى كيف يتم الوصول لقواعد البيانات» من المفترض بعد 
تعرفك على خدمات الويب أن يكون الأمر هنا أكثر بساطة بكثير» فكل شيء عبارة 
عن ع١١٥٤€05€۲۷/‏ » آيضا سترى كيف يتم الاتصال بقاعدة البيانات من خلال 
۴ بدلا من آن تقوم بعمل ڪل شيء بشکل يدوي و ستری ڪیف ان ۷٣۴‏ 


بعد الانتهاء من هذا الفصل يحب آن يضاف إلى معرفتک التالى : 


. Web Service ۃIlıخiةwl‎ ® 
. WCF RIA خم‎ ® 


ي 
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Web Service مlدختwl‎ 


حسنا الاتصال بقاعدة البيانات ليس بالأمر الصعب نهائيا 2 ۸عاااعvاأS‏ »هتاك 
طريقتين للاتصال بقاعدة البيانات 2 أ۸ ع اا6 ۷|أS‏ إما أن تترك ڪل شيء د ۷٣۴‏ 
۸4 أو أن تهتم آنت بكل شيء بنفسك ٠‏ سآتطرق هنا لكلتا الطريقتين 2 
ightاerاSİ‏ . ¥ حظ أیضا لن آتحدث عن ۸00.1٥۴1‏ أو الاتصال بقواعد البیانات 
.. الخ » بل سأنتقل مباشرة إلى التنفين لأني أفترض بأنك تعرف هذه المعلومات 


سابقا » لدينا جدول ب2 قاعدة البیانات بالشکل التالى : 


wolurmn Marre Uata Type اا‎ ul 
GID | jn 
Mlarme rwrarc har (50 El 
Erruaiil nwarchar S0] ll 
Passware rrarc har (5O) IF 
website rmwarchar (GO) EF 
| 


و ا مجوعا می الاات ا تک :ها ریدو اکن کو اصن لے کے 
البیانات من ۸ا٣٥‏ ۷اا » طبعا سأفترض أنك قمت بإنشاء تصنيف باسم ١56۲ل‏ 
2 مشروع ۷8 للحصول على الاتصال و من ثم طريقة للحصول على جميع القيم 


ے قاعدة البيانات من هذا الجدول » إليك الشفرات : 
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public class UserDAL 

{ 
static string connectionString = 
Connectlons.connectionString; 
public List<Users> GetUsers() 
{ 
SqlConnection Connection = new 
SqlConnection(connectionString); 
DataSet objSet = new DataSet(); 
List<Users> IstResult = null; 
SqlCommand Command = new SqlCommand(); 
Command.Connection = Connection; 
Command.CommandText = "LoadingUsers'; 
Command.CommandType = 
CommandType.StoredProcedure; 
SqlDataAdapter sqlDataAdapter = new 
SqlDataAdapter(); 
sqlDataAdapter.SelectCommand = Command; 
Try 
{ 
sqlDataAdapter.Fill(objSet); 
Users objUsers; 
if (objSet.Tables.Count > 0) 
{ 
IstResult = new List<Users>(); 
foreach (DataRow dr in objSet.Tables[O0].Rows) 
{ 
objUsers = new Users(); 
objUsers.id = int.Parse(dr["ID"].ToString()); 
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objUsers.name = dr["Name"].ToString(); 
objUsers.email = dr["Email"].ToString(); 
objUsers.passwrod = dr["Password"].ToString(); 
objUsers.webSite = dr["webSite"].ToString(); 
IstResult.Add(objUsers); 


catch { } 

finally 
{ 
Command.Connection.Close(); 
Command.Parameters.Clear(); 
Command.Dispose(); 


sqlDataAdapter.Dispose(); 
} 


return IstResult; 


ا 
ا 


public class Connections 


{ 


public static string connectionString = 
ConfigurationManager. 
ConnectionStrings[" ConnectionStr"].ConnectionString; 


1 


public class Users 


{ 
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public int id { get; set; } 
public string name { get; set; } 
public string email { get; set; } 


public string passwrod { get; set; } 
public string webSite { get; set; } 
ا‎ 


الآن لنستخدم ما تحدثنا عنه ے2 الفصل السابق و هو ۸/٤۴٥ 5٥۲۷٥٥‏ لتمرير هذه 
الطريقة د ا۸عاااعvاأS‏ » لعمل ذلك سنقوم بإضافة ءا56۷ W€‏ جديدة و 
سمها كما شنت مثلا 43303565٣‏ فقط قم بإنشاء طريقة جديدة و ليكن اسمها 
ئەل ع Ladin‏ علی أن تعید الاخیرة ااا onsااec‌اامC‏ من النوعء Users‏ › 


إليك الشفرة : 


[WebMethod] 
public List<Users> LoadingUsers() 


{ 


UserDAL usr = new UserDAL(); 
return usr.GetUsers(); 


ا 


لنعد إلى ۸عاااveااS‏ اسحب 4٣ع data‏ إلى النموذج › ثم أضف 8٥۲۷|٥١‏ 
Refer 65‏ جديدة تشیر إلى تلك التى قمت بعملها قبل قليل كما رأينا ك 


الفصل السابق لا تنسى طبعا آن تقوم ببناء التطبيق قبل استدعاء الخدمة › 
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2 المشيد الرئيسي للصفحة لن نقوم بعمل أي شيء جديد هنا © فقط سنقوم 
باستدعاء الطريقة السابقة و جعل البيانات ك ع€°٥s501۲€[|‏ تڈداةö Data grİd‏ 


تمام كما رأينا 2 فصل ٥|0١١‏ ههل اليك الشفرة : 


public MainPage() 
{ 
InitializeComponent(); 
ServiceReference.databaseSrSoapClient SD 
= new databaseSrSoapClient(); 
SD.LoadingUsersAsync(); 
SD.LoadingUsersCompleted += new EventHandler 
<LoadingUsersCompletedEventArgs>(SD_LoadingUsersCompleted); 
} 
void SD_LoadingUsersCompleted(object sender, 
LoadingUsersCompletedEventArgs e) 
{ 
if (e.Result != null) 
{ 
dataGrid1.AutoGenerateColumns = true; 
dataGrid1.ltemsSource = e.Result; 


ا 


شغل التطبيق الآن حتى ترى البيانات . 
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. WCF RI۸ استخدام‎ 


لنرى الآن الطريقة الآأخرى للاتصال بقاعدة 
البیانات ے2 تطبيقات ا۸ عاا٣ع۷آآS‏ و ذلك 
باستخدام ۸|۸ ۷)۳ افتح مشروع جدید و 
لكن هذه المرة توقف قليلا عند شاشة البداية › 
قم بتفعيJ‏ lIخlıèر Enable WCF RIA‏ 


5 ثم انقر على موافق . 


الجزء الثاني : الفصل الخامس 


New Silverlight Application 


Click the checkbox below to host this Silverlight application In a Web site, Otherwise, a 
test page will be generated during build. 


[IY] Host the Silverlight application in a new Web site 


New Web project name! 
databasellsingWCFRIA, Web 


New Web project type: 


| ASP.NET Web Application Project 


Options 
Silverlight Version: 


| Silverlight 4 


FT] Enable WCF RIA Services 


الخطوة التالية حدد مشروع أ€١.50ه‏ ثم قم بإضافة AD0.net En‏ » طبعا 


هنا أفترض أن لديك قاعدة البيانات ( يمكتنك أن تعثر على قاعدة بيانات هذا المثال 


2ے مجلد Chapter 5 < Database‏ ) اعد التسمیة اتی ٣١‏ ٥ءلا‏ مثلا ے2 مثالنا 


هنا » سيطلب منك المعالج 2 الخطوة الأآولى اذا كانت البيانات من 08 أو من 


)۸ حدد 06 إذا كنت قد قمت بإضافة قاعدة البيانات للمشروع سيعتر عليها 


المعالج > آو حدد آي قاعدة بیانات ترغب ا يهم ذلك كتيرا > لمهم آن تتصل بقاعدة 


بيانات أي كانت . ثم اضغط التالى » حدد الجداول اضغط انتهاء . 
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الخطوة التانية هيا إضافة 00"21١‏ 


Add New ÛDomain Service Class ا‎ 
Domain service class name: 8 ۹ S . 
ااا ا ا و ی‎ 
[Wl Enable client access 
[l Expose OData endpoint 9 AS p 0 et من جلدید ایقی 2 مسروع‎ 


Available DatalLontextObjectContext classes: 
| DatabaseEntities (Entity Framework] Do Mm a | 8 ضف > 4 صر حلد لد من | 4 وع‎ 


Entities Enable editing 


ا Service‏ » 4 الصورة على اليسار ۳ FlUserstable‏ 
سترى خيارين ما يهمنا هو الخيار الأول 
e‏ ا ا و 
الوصول لتطبيقات ا١ء‏ اآا€) لهذا 


00"n17‏ تأكد من تحديدك لهذا الخيار 


Generate associated classes for metadata 


تم اختر الجدول الذي تريد عرض بياناته 
على Sive rاig ۸N‏ 2 حالتنا هنا سیکون ٥٥4ء۲‏ عءلا أيضا لا حظ يمکنڪ تمکين 
عمليات التعدیل على الجدول من خلال تحدید الخیار ع٣ edi‏ eاbجےnع‏ حيث 
سيقوم هذا الخيار بتوليد شفرات التحديث و الإضافة و الحذف » تآأكد من تحديدك 
أيضا الخيار الذي بالأسفل إkئىىمى Generate associated classes F٠٥0‏ 


. »اضخغط على موافق الآن‎ ne13 
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اعد بناء التطبيق الآن وعد إلى تطبيق "عأ ٥۷|أS‏ » أضف 2 الصفحة الرئيسية 
أداة 8٣١‏ 033 » افتح شفرة الصفحة الرئيسية › ثم أضف الشفرة التالية : 


' DomainService1 context = new DomainService1(); 


context.Load<Userstable>(context.GetUserstableQuery()); 


السطرالأول قمت بإنشاء كائن من الخدمة التي قمت بإنشائها 2 تطبيق ا٥١.٥35‏ 
لاحظ هنا أني قمت باستدعاء المشروع ۷€ كفضاء أسماء 2 الآعلى حتى 


آستطيع الوصول لهذه الخدمه التي قمت بإنشائها قبل قليل › الشفرة : 


" using databaseUsingWCFRIA.Web; 


2 السطر الثاني قمت باستدعاء الطريقة ۲۷ 1€ ۲١35|0۵‏ عءلاا66 ووضع جميع 
النتائج داخل الكائن أ×€١K0‏ على أن تكون هذه النتائج من النوع Usertable‏ « 
ما تبقى هو العودة بهذه القيم إلى الأآداة 8٣١‏ 033 »الشفرة : 


1 


dataGrid1.AutoGenerateColumns = true; 


2: 


dataGrid1.lItemsSource = context.Userstables; 
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شغل التطبيق الآن و انظر للنتيجة › رأينا 2 هذا الفصل كيف يتم التواصل بين 
تطبيقات ا٣‏ عأا٣ع S۷‏ و قواعد البيانات » الأمر لا يختلف إطلاقا عند الحديث عن 
عمليات التحديث أو الإضافة آو الحذف يمكنك استخدام إحدى الطريقتبن إما 


یدویا آو استخدام ۸00.۸6۲ مع ۴|۸ C۴‏ »الخيار لك 2 النهاية . 


يمكن الحصول على معلومات أكتثر عن هذه التقنيات من 
خلال هذه الروابط : 


e \WCF RIA Services 
e riaservices 
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الفصل السادس 
التعامل مع الوسائط المتعددة 


سنتحدت ے2 هذا الفصل عن كيفية التعامل مع الوسائط المتعددة متل ملفات 
الأصوات و الفيديو من خlڻأJ Silverlight‏ كما سنتطرق إلى التعامل مع ڪاميرا 


الويب . 
يعد الانتهاء من هذا الفصل يحب أن يضاف إلى معرفتك التالي : 
Media Element sšlaî ®‏ . 


© استخدام كاميرا الويب . 


| 1 
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استخدام الوسائط المتعددة آمر مهم جدا 2 عالم الويب » لعرض مقاطع الفيديو 
متلا و استخدام كاميرا الويب آو عرض الصور و تشغيل ملفات الصوت › آحد آهم 


الآدوات التى سنستخدمها للتعامل مع الوسائط المتعددة الأداةö MediaEle ment‏ . 


: MediaElement ö|دا استخدام‎ 


أحد أهم الأمور التي يجب أن تعرفها هي أن أداة ځMediaElemen‏ تتعامل فقط 
مع هذا النوع من ملفات الفيديو ١/۷‏ من الإصدار الأول حتى الإصدار الثالث 
منه و ایضا ۷۸×N۷۸‏ و M/A‏ ۷ و آخیرا 1.264 ۰ آما عن ملفات الصوت 
4 من الإصدار السابع حتى التاسع و أيضا ملفات °3( » وتدعم هذه الأداة 


أيضا البث المباشر . 


لنبدأ العمل قم بإنشاء مشروع جديد من أ۸ أ۲ 5|۷6 2 الواجهة الرئيسية حدد 
ıلأدöı MediaElement‏ تج All Silverlight Controls puقڙlا 2 ةlدÎ| sia‏ 
من شريط الأآدوات » لن ترى شيء جديد حتى اللحظة ستجد أداة فارغة على 
الصفحة › لتحديد مقطع فيديو أو صوت ستستخدم الخاصية 501۲۲۵ بإمکانك 


عمل هذا الأمر من خلال شفرة ۸1× حتى نتطرق لما يسمى بمصادر المشروع › 
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أولا أضف ملف الفيديو المرفق مع المشروع أو آي ملف فيديو أخر إلى المشروع (إلى 


تطبيق ٣‏ عآاا۷6اأ؟ ) حدد هذا الملف ثم انقر بزر الفأرة الأيمن و حدد الخيار 


امام تأکد من تغيير الخاصية 0۸ا٤۸‏ d|أ6u‏ إلى Rescues‏ »تم من 


شفرة )۸۷× أضف الخاصية 5010۲٤١۵‏ مع تعديل قيمتها إلى مسار ملف الفيديو 


بهذا الشكل : 


<MediaElement Source="Silverlight.wmv" 
Height="213" HorizontalAlignment="Left" 


Margin="17,21,0,0" Name="mediaElement1" 


VerticalAlignment="Top" Width="364" /> 


اللآن شغل التطبيق و سيبدآ الفيديو بالعمل مباشرة 
> خطوتنا التالية هيا التحكم بهذا الفيديو من 
التوقف المؤقت و التشغيل و التوقف كليا » أضف 
ثلاثة 81۷10١‏ للواجھة ثم انشا حدث )٤اا‏ لكل 
عنصر متهم و اكتب الشفرات التالية 2 الزر 


المخصص له : 


| | Play | | 3top | |_ Pause | 


TET 


ا 
O rtpvilocalhost O <> E û X | & SLMediaElement‏ |9 5 


` @ 


private void button1_Click(object sender, RoutedEventArgs e) 


{ 


mediaElement1.Play(); 


1 
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private void button2_Click(object sender, RoutedEventArgs e) 


{ 
mediaElement1.Stop(); 


ا 


private void button3_Click(object sender, RoutedEventArgs e) 


{ 


mediaElement1.Pause(); 


1 


أعد تشغيل التطبيق و جرب الأزرار » بهذا نكون قد أنجزنا تقريبا ۳١‏ من العمل لكن 
ما زال آمامنا المزيد »2 الخطوة التالية سنضيف شريط 5|۵٥١‏ ليعرض مدى تقدم 


الفيديو . 


لعمل ذلك سنحتاج للحدث 4٤0١ع‏ م0ه اكع للحصول على طول الفيديو أولا 
» ب2 البداية حدد الأآداة 08ا5 من شريط الأآدوات ثم أضفها للنموذج › انشا الحدث 
Media pended‏ و ذلڪ بتحدید العتصر "e۸‏ e|غMedia‏ و من ثم 
التوجه لنافذة الخصائص و ب4 تبويب الأحداث انقر نقرا مزدوجا على الحدث 

Media0pended‏ . للحصول على طول الفيديو سنحتاج للخاصية 
NaturalDuration‏ التابعة تلأداة MediaElement‏ و التي بدورها لدیھا 


خاصية اسمها ١€53١‏ 11 » وا#آّن اكتب شفرة الحدنiث MediaOpended‏ : 


90 


الجزء الثاني : الفصل السادس 


" slider1.Maximum = 


2: 


mediaElement1.NaturalDuration.TimeSpan.TotalSeconds; 


بعد أن حصانا على طول المقطع و جعلنا القيمة العظمى للأداة 5|46۴ تساوي هذه 
القيمة » نحتاج أيضا أن نغير هذه الخاصية ع نا۷2 للأداة 5||۵6١‏ أثناء تشغيل 
الفيديو » لعمل ذلك سنضطر إلى إنشاء |١8١‏ لكي يؤقت هذه العملية › 2 أعلى 
الشفرة قبل سطر () 131١۲38۴‏ أضف السطر التالي : 


' System.Windows.Threading.DispatcherTimer videoTimer 


2: 


= new System.Windows.Threading.DispatcherTimer(); 


المشيد الرئيسى للصفحة ستفعل الخاصية 110۲۷۵1 إلى ثانية » الشفرة : 


1 


videoTimer.Interval = new TimeSpan(O, O, O, 1); 


ثم سنطلق الحدث )٤ا۲‏ » اکتب =+ )cا video ime r.‏ ثم انقر علی ۲۵٥‏ 
مرتين » سينشاً ۷5S‏ الحدث ۳٥۲_۲٤٣)‏ ۷|001 داخل هذا الحدث سنقوم بتعديل 
الخاصية ع اج۷ للعنصر S١٥١‏ إلى الثانية التي يعرض بها المقطع حاليا » و لكن 
قبل ذلك ستجعل €١‏ ۷|06011 يبدأ بالعمل باستخدام الطريقة 3۲ا5 بشكل 
التالى : 


e 
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"' videoTimer.Start(); 


ليصبح المشيد بهذا الشكل : 


public MainPage() 
{ 


InitializeComponent(); 


videoTimer.Interval = new TimeSpan(O, O, O, 1); 
videoTimer.Tick += new EventHandler(videoTimer_Tick); 
videoTimer.Start(); 


1 


ا¥آن ے2 الحدث )|۲ _۲ €" Vid e011‏ اکتب الآتی : 


الآن قم بتشغيل التطبيق لترى شريط 5|۵٤١‏ يعمل . 


هناك المزيد أيضا » يمكنك استخدام الفيديو 
الذي يتم عرضه على هذه الأداة لتشكيل 
ڪلمات و حروف أو ما شابه ذڏلڪ !۱ › ڪما 2 
الصورة على اليسار › لنبدآً مشروع جديد ج 
ا عiاverاSİ‏ . ثم أضف ملف الفيديو و اجعله 


ك كء€ل1٤۸€5‏ .» ضف 2 الصفحة الرئيسية 


« TextBlock sli و‎ MediaElement ölدî‎ 
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قم بتصغير حجم اداة Media ٤عاe"ع ٣t‏ حتى ا يمكن رؤيتها و وتكبير الأداة 
)ا XB‏ على كامل الصفحة › قم بتغيير الخاصية Si†7eا۸٥۴‏ إلى ۷۲ › 


الخدعة 2 الأمر هو تغيير خلفية الكلمة و ليس تشكيل كلمة من مقطع فيديو © . 


لعمل ذلڪ نحتاج إلى ما يسمى ڊ videoBrush‏ و اlخlاصية ForegrOUNd‏ 
الخاصة ب )×1€×8|0 » حيث سوف يتم تغيير الخاصية N4۳"€‏ ع٣50۷۲‏ التابعة د 


ideoB rush‏ إئی اسم الأداة edia Element‏ بالشکل التالی: 


<TextBlock Height="203" HorizontalAlignment=" Left" 

Margin="10,26,0,0" Name="textBlock1" Text="TextBlock" 
VerticalAlignment="Top" FontSize="72" Width="378'"> 
<TextBlock.Foreground> 


<VideoBrush SourceName="mediaElement1"> 
</VideoBrush> 

</ TextBlock.Foreground> 

</ TextBlock> 


قم بتشغيل التطبيق الآن . 
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استخدام كاميرا الويب . 


4 البداية لنقم بإنشاء مشروع جديد ے2 أ۸عااا ع5۷ أضف إلى النموذج أداة 
Button‏ ودخ StackPanel‏ داخل Stack Panel‏ اضف داۃڌ Rectangle‏ › ڪم 
تتخيل حجم الشفرة التي ستستخدمها للتعامل مع كاميرا الويب (! مقارنة ب 
Adobe Flash‏ ¥ شیء ینکر © › انشا حدث ek‌iا€‏ تلد 0۸ا Bu‏ » ے البداية 
علينا التآأكد من وجود كاميرا لدى المستخدم قبل محاولة استخدامها › و أخن 
الأذن من المستخدم للتعامل مع كاميرا الويب » يكفي فقد تعريف متغير من نوع 


أا B00‏ للحصول على هذا الأذن »ے2 الحدث )٤ا٣‏ اكتب التالى : 


قم بتشغیل التطبیق الآن و انقر على 510۸ ستجد بان ا۸٣‏ عاا٣‏ ٥۷ا5‏ يطلب الأآذن 

من المستخدم للوصول للأجهزة المتصلة بجهاز العميل › إليك الشفرة للحصول على 

الكاميرا تم ستأتي للشرح : 
bool b = CaptureDeviceConfiguration.RequestDeviceAccess();‏ 


if (b) 
{ 


CaptureSource webCam = new CaptureSource 


{ 


الجزء الثاني : الفصل السادس 


VideoCaptureDevice = 
CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice( 


)}; 
VideoBrush vidB = new VideoBrush(); 


vidB.SetSource(webCam); 
rectangle1.Fill = vidB; 
webCam.Start(); 


1 


بعد التأكد من آن المستخدم قام 


€ WebCaminSilverlight 


بمنحي الصلاحيات للوصول إلى 
كاميرا الويب › آقوم بانشاء عنصر 


CaptureSoUrCe gaill ja‏ و 


الذي بدوره يحدد کكامیرا الویب 


الافتراضية على جهاز العميل ثم 
أقوم بإنشاء كائن من النوع ١5ا۲‏ 68 ۷|460 و الذي يستخدم لاحتواء مقاطع فيديو 
كما رأينا سابقا حيث سيكون مصدر الفيديو الكائن ١60٤03۳"‏ » أخيرا أقوم 


بتعبنة هذا الفيديو داخل أداة ۸8٤۲3۸8٥‏ ثم ابدأ عرض الويب . 


هناك العديد من الطرق التى يمكنك الاستفادة داخل الكائن N۴5٤3"‏ متلا 
يمكنك تسجيل الأصوات آثناء عمل الكاميرا من خلال وضع الخاصية 


aij AudioCaptureDevice 
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« CaptureDevicesConfiuration.GetDefultAudioCaptureDevices 


أيضا يمكنك التوقف من خلال الطريقة 510p‏ . 


قبل آن نختم هذا الجزء من ۸۲ع ااا ع۷آآ؟ لنقم بعمل تطبيق باستخدام We‏ 
2 البداية تخيل لدينا السيناريو التالي › أثناء تسجيل الدخول » تطلب من 
المستخدم صورة معينة حيث تتيح له استخدام كاميرا الويب لالتقاط صورة له › 
يقوم التطبيق بالتقاط الصورة على الكاميرا و تحويلها إلى صورة من النوع ع٥(‏ 
لنبدأ » 2 البداية قم بتصميم نموذج بسيط يحتوي على زرين الأول [اعW‏ أا هاs‏ 
cam‏ و ا¥خر take this as an İi" 2g€‏ طبعا لدینا أداة eأRectang‏ داخل 
أداة 6۲١١‏ هذه المرة »الآن من شفرة ۸1× یجب أن تتأکد من ۸g ٤٥١‏ هاc٥۲‏ تملئ 
تماما آداة ۲۵۵0ع الجديدة ( لحاجة ے2 نفس يعقوب ) › ما Start BU0‹¬ j2‏ 
W€ cm‏ قمنا يعمل شفرته سابقا » سننتقل للخطوة التالية › 
و هي شفرة 07 take this as an image BU‏ . 4 البداية ستجد 2 المرفقات 


مكتبة بعنوان ۴.٤00۲۵‏ أضفها كمرجع لشروع ٣ا٣‏ ۷6ا5 ثم قم باستدعاء 


فضائى الأسماء الموجودة 2 هذه المكتبة : 
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لأننا سنحفظ الصورة على مكان يحدده المستخدم سنحتاج أيضا إلى فضاء الأسماء 


0| و أيضا فضاء الاسماء £^ Windows. Midea.| magi‏ » بھذا الشکل : 


2 أعلى الشفرة سنقوم بتعريف كائن من النوع 03|0£ |53۷6۴ » ثم 2 المشيد 
الرئيسي سنقوم بتعيين هذا المتخير و تحديد أنواع الملفات » الأمر تماما كما هو عليه 


: الشفرة‎ . Windows Form A 


private SaveFileDialog saveFileDlg; 
public MainPage() 
{ 
InitializeComponent(); 
saveFileDlg = new SaveFileDialog 
{ 
DefaultExt = ".jpg'", 
Filter = "JPEG Images (*jpeg *.jpg)| *.jpeg;*.jpE", 
j; 


الخطوة التالية من العمل هي استخدام المكتبة ۳1.00۲١۵‏ لتحويل الصورة التي تم 


التقاطھا إلى ع۴۴٥مل× ۴|١‏ ثم أخيرا تحويلها إلى ٣۵۴٤‏ |ععمز يمكنك مراجعة 


مكتبة N150١.‏ للمزيد من التفاصيل : 
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الجزء الثاني : الفصل السادس 


1 
int w = bmp.PixelWidth; 
int h = bmp.PixelHeight; 
int[] p = bmp.Pixels; 
byte[][,] pixelsForJpeg = new byte[3][,]; 
pixelsForJpeg[O0] = new bytelw, h]; 
pixelsForJpeg[1]|] = new byte[w, h]; 
pixelsForJpeg[2]| = new bytelw, h]; 
inti = O; 
for (int y = O0; y < h; y++) 
1 
for (int x = O0; X < W; xX++) 
1 
int color = p[i++]; 
pixelsForJpeg[0][x, y] = (byte)(color >> 16); // R 
pixelsForJpeg[1][x, y] = (byte)(color >> 8); // G 
pixelsForJpeg[2][x, y] = (byte)(color);  //B 
} 
1 
` var jpeglmage = new FluxJpeg.Core.lImage(new ColorModel 
{ colorspace = ColorSpace.RGB }, pixelsForJpeg); 
` var encoder = new JpegEncoder(jpeglmage, 95, dstStream); 
encoder.Encode(); 


ا 


تستقبل الطريقة كائن من النوع (|81٧‏ هعامس و كائن من النوعء S۲۴۵۳‏ 


الأول يمتل الصورة والتانى يمتل مكان حفظ الصورة » لا توجد طريقة مباشرة لآأخذ 
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الجزء الثاني : الفصل السادس 


الصورة من الكاميرا » هناك عملية تحايل ما سنقوم به هو أخذ صورة لد 6۲١١‏ التي 
تحتوي على ع١3٤۸۵‏ و بما أن الآخيرة ممتدة تماما على 8۲١‏ فهذا يعني أن 
المستخدم سيحصل على الصورة التي التقطها من الكاميرا › 2 البداية علينا تحويل 
0۵ إلى كائن من النوع م۳ 81ع|0هع(أ٣W‏ و من ثم نحدد المكان الذي يريد 
المستخدم حفظ الصورة فيه » ثم نقوم باستدعاء الطريقة التي 2 الأعلى » طريقة 


, saveWebCam 


private void SaveWebCam(Stream dstStream) 


WriteableBitmap bmp = new WriteableBitmap(grid1, null); 
EncodeJpeg(bmp, dstStream); 

1 

catch (Exception ex){ 

MessageBox.Show(ex.Message, "Error saving webCam'", 
MessageBoxButton.OK); 
1 
1 


لم يتبقى الآن سوى استدعاء هذه الطريقة مع تمرير مكان الحفظ › 2 الزر ۹۸€ 


: كا استدعى الطريقة السابقة بهذا الشكل‎ as imag 
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الجزء الثاني : الفصل السادس 


if (saveFileDlg.ShowDialog().Value) 


{ 
using (Stream dstStream = saveFileDlg.OpenFile()) 


{ 
SaveWebCam(dstStream); 


1 


شغل التطبيق ثم اضغط على زر تشغيل الكاميرا » و آخيرا زر التقاط الصورة. 


إلى هنا نكون قد انتهينا من هذا الجزء › رآينا فيه كيف يتم التعامل مع خدمات 
الويب بے ۸عاااع۷اأS.‏ و كيف يتم الاتصال بقاعدة البيانات يدويا وباستخدام 
المعالج › ثم رأينا كيفية عرض مقاطع الفيديو باستخدام ال™Îداö MediaEle ment‏ 
ورأينا أيضا كيف يتم التعامل مع كاميرا الويب وأخيرا استخدام 
e‏ tedStorageFهاoءا‏ لتخزین ملفات صغیرة مثل ملفات C00) ٤5‏ علی جھاز 


العميل . 
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الجزء التثالث 


المزيد عن silverlight‏ 


2 هذا الحزء ستتعرف على العديد من الأمور الأكتثر تطويرا 2 g۸‏ ااverاSi‏ . 
التعرف على أجزاء المشروع و تشغيل التطبيقات خارج المتصفح › ثم التعامل مع 


الثيمات » تم سنتطرق آخيرا لنقطة مهمة وهي العمل خارج المتصفح 


يعد الانتهاء من هذا الحزء يحب أن يضاف إلى معرفتک التالى : 


اجزاء مشاريع و مجلدات Silverlight‏ . 


. التعامل مع تطبيقات ا٣ ع|ا٣۷6|أS خارج المتصفح‎ ٠ 
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الجزء الثالث : الفصل السابع 


الفصل السابع : 
أجزاء مشlرga Silverlight‏ 


كان يجب أن أتطرق لهذه النقطة 2 بداية الكتاب › و لكن رغبت بأآن أبداً بالعمل 
مباشرة حتى أبعد عتنك الملل قليلا »2 هذا الفصل سترى ما هى المجلدات الرئيسية 


و كيف يتم الانتقال بين الصفحات 2 تطبيقات ا۸ عااver Sil‏ . 


يعد الانتهاء من هذا الفصل يحب أن يضاف إلى معرفتك التالي : 
۵ مکونات مشروع اد W€‏ . 
٠‏ مكونات المشروع Silverlight‏ . 


|lkف app.xaml‏ . 
٠‏ الانتقال بين الصفحات . 


س 
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Solution Explorer r OX 


مکونات مشرو ع ال EAE Web‏ 


۳ Solution 'SilverlightWebProject' (2 projects] 
a Ê SilverlightWebProject 

: a] Properties 

: û] References 


وصولك لهذه النقطة يحتم عليك أن تعرف كيف تتم الآمور 2 0 


+ | MainPage.xaml 


۳ 1E SîlverlightWebProject.Web | 


» dl Properties ۴ ج‎ 

الخلف » لقد تحدثنا ے2 المقدمة بأن تطبيقات ۸ عاا٣ S۷6‏ يتم References‏ . 
re‏ » م مھ LlientBin‏ 
Silverlight,js‏ ]48 
E] Silverlight WebProjectTestPage.aspx‏ 


تخزبنها غلی جهاز | لعميل و لکن ين ينم تخزبنها غلی جهاز Silverlight WebPrajectTestPage.html‏ 
yy Web.config‏ : 
الخادم ١‏ لكى يفقوم العميل بتحميلها » سوف تساعدك هذه النقطة 


كثيرا عند الحديث عن نشر تطبيقات ا٣ S| ۷٥٣|‏ إلى الويب . 


إذا ألقيت نظرة على مشروع ال N80‏ ستجد مجلد اسمه 


ientBinاC‏ و 2 هذا المجلد يتم تخjزيj‏ مترca Silverlight‏ 


e Solution Explorer FERIS 


الذي ينتهى بالامتداد .×3٥‏ على جهة الخادم › السؤال الآن كيف 
يعرف الخادم مسار التطبيق ١!‏ هنا يأتى دور صفحة ع¬.sمA‏ أو HIM|‏ aکآ‏ 
الصفحتين تحتوي علی ۳0٥۲۳‏ هذا ال ۳0۲۳ لديه وسم اسمه 501۲٤٥۲۵‏ و هذا 


الآخير يخبر صفحة الويب بأن تطبيق ٣ع‏ ا٣ S۷6‏ موجود بے هذا السار . 


4form id="forml" runat="server" style="height :100%"+ 
div id="silverlightControlHost"+ 
4object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width=" 188%" height=" 100%": 
paran name="source" value="ClientBin/SilverlightNebProject.xap"/> 
param name="onError" value="onSilverlightError" /? 
4paran name="background" value="white" + 
4paran name="minfuntimeVersion" value="4,4,50826,0" /} 
paran name="autollpgrade" value="true" /$ 
<a href="http://go.microsoft, com/fwlink/ ?LinkID=143156&v=4,8,58826,0" style="text-decoration:none"+ 
cing src="http://go.microsoft.com/fwlink/?Linkld=161376" alt="Get Microsoft Silverlight" style="border-style:none"/+ 
4/aض‎ 
</object:tiframe id=" 5] historyFrame" style="visibility:hidden;height:@pxjuidth :@px; border :4px">4/ iframe /div? 
4 form? 
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الجزء الثالث : الفصل السابع 


حسنا ماذا إذا لم یستطع هذا ۴0٥۲۳‏ إيجاد التطبیق ے2 مجلد ١۸۲8ء‏ اا€ عندها 
یطلق حدث یسمی 0١۴۲۲۵٥۲‏ . لاذا هناك صفحتين واحدة ]11۷ و الآخرى 
۸.61 » بكل بساطة إذا كنت ستجري شفرات من جهة الخادم فعليك استخدام 
الصفحة ٤٤٣.5pھ‏ و بعض ادوات ۸٤‏ عاااع۷اا؟ لابد آن یتم استدعائھا من خلال 


أne. asp‏ و ليس 11۷1 ڪما هو الحال مع دة Bing M3P‏ . 


بقى لدينا ملف واحد من جهة الخادم وهو كز."عاااع۷آأS‏ هذا الملف يمكن اعتباره 


أداة لاحتواء تطبيق ١ع‏ آًأا S۷6‏ و عرضها على الصفحة الرئيسية . 


مكونات مشرو ع Silverlight‏ 


من جهة أخرى تطبيق أ١‏ ع|أ١۷6۲|أS‏ يمكن أن يحتوي على العديد من الملفات بداخله 
و لكن سأتحدث عن المجلدات الرئيسية فقط » المجلد الأول هو ع€٥٤|9€۲۷‏ 
۴۴۴65 ويحتوي هذا المجلد على جميع خدمات الويب التى قمت باستدعائها 


من مشروع الويب آو من آي جهة آخرى . 
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لديك ملف ¥ يخلو آي تطبيق ے2 ۸ عاًا٣‏ ع۷ا¡ مته وهو أ" ه×.٥30‏ و هو يوازي 
تماما r08۲a۳.٤€s‏ م ے4 تطبیقات ۴0۲۳ WS‏ ۷|۸00 سنتحدث عن هذا املف 2 
النقطة التالية » آخيرا لديك مجلدين هle refereNC€S‏ ,و Jgîyı Properties‏ 
يحتوي على المراجع التي أضفتها للمشروع و الثاني يحتوي على ملف ١1ا٥5‏ 
الخاص بالمشروع لاحظ هنا شيء مهم جدا » بما أن تطبيقات أ٣‏ عاا٣‏ ۷6ا5 تعمل 
على جهة المستخدم فإن ملف ع١‏ ع5 التابع لتطبيق أعآاا۷6آأك5 يتم تخزينه 


على جهاز العميل و هو يختلف تماما عن ملف 561١8‏ التابع لتطبيق اد W€‏ . 


الملف App.xam|‏ 
كما رأآيت ے2 الصفحة السابقة » يعتبر هذا هو نقطة البداية لتطبيقات 
اighاerاSi‏ على عكس ملفات ا۸۷ الموجودة لديك 2 المشروع › ليس لدى 
| ×.Pه‏ واجهة رسومية » كما أنه ينقسم إلى قسمين الشق الأول من هذا الملف 
ينتهي بامتداد ×3١‏ و الثاني ينتهي بامتداد €5 » يستخدم الشق الأول دائما لتعريف 
الملفات أو الأدوات و ما شابه ذلك التي تريدها أن تكون كڪمصدر للمشروع بحيث 
يمكن أن يصل لها آي جزء من التطبيق ( سنرى هذا الأمر 2 فصل التعامل مع 
165" ) » ما الشق الآخر و الذي ينتهي بامتداد ٩5‏ فهو محور حديثنا 2 هذا 


الفصل . 
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الجزء الثالث : الفصل السابع 


لدى هذا الملف مشيد و أريعة طرق مبينة 2 الحدول التالى : 


Application_Startup 


Application_Exit 


Application_UnhandleExc 
aption 


ReportErrorToDOM 


و من هنا يتم تحديد نقطة الانطلاق ج 
التطبيق أيضا يمكنك هنا إنشاء بعض 
الطرق لكي يتم تنفيذها مباشرة بعد آن يتم 
تحميل التطبيق على جهازالعميل . 

على عکس الأولى يتم إطلاق هذا الحدث 
مباشرة عند إغلاق التطبيق . 

عند حدوث آية آخطاء لم تحاول اصطيادها 


يتم إطلاق هذا الحدث مباشرة » لذلك 


يستخدم مطوري ال ۸ع اا٣ S۷٥‏ هذا الحدث 


عند وقوع خطآ بتحديث الصفحة مباشرة . 
4ے حال وقوع أخطاء تمت معالجتها أو 
اصطيادها إن صح التعبير يتم إطلاق هذا 
الحدث حيث يخبر المستخدم ما هو الخطاً 
الذي حدث آثناء تشغيل التطبيق . 
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لنبدأ مع الطريقة صAppliaction_Startu‏ › ے2 مشروعء ا¬ligاverاSi‏ اضف 
|/VerlightControاSi‏ بحث یکون اسمها ۴٥ع۸ds°3€ ۲١e‏ متلا » ے2 الصفحة 
الجديدة أضف ×50×€[ و آداة ١۷0ا5‏ فقط لكي نحدث اختلافا بسيطا بينها و 
بين صفحة ع۲2٣ Mai‏ .١ن‏ عد تلطريقة م ل2۲۲ cat ٥۸ _ St‏ iاممA‏ وقم بتخییر 
قيnة‏ الخlصة new FrindesPage Jı new mainpage jn RootVisual‏ 
اللآن قم بتشغيل التطبيق و انظر من أين بدأ التنفين › قبل أن تغلق النافذة أريدك أن 
تلقي نظرة على شريط العنوان 2 المتصفح › ماذا تالاحظ ! لا يوجد شيء يشير 
بآنك بے الصفحة ١ ٣١'e ۸4°3٥‏ السبب ے ذلڪ بÎنj‏ صlaaت‏ ئSilverlgih y‏ 


تتعامل مع <۲۴۴" ه > لتنتقل بين الصفحات سنرى ذلك 2 النقطة القادمة . 


الحدث ا#آخر هو اأ×٤_0۸|اةءأام‏ م۸ وهو يقع بعد إغلاق المتصفح › لنكتب شيء 


من هدا القبيل : 


private void Application_Exit(object sender, EventArgs e) 


{ 


MessageBox.Show(" did you close the Browser !"); 


1 
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الانتقال بين الصفحات في اطعا مvاSi‏ 


اللانتقال بين الصفحات ے2 تطبيقات ٣ع‏ ااا ۷6|آ؟S‏ يختلف كثيرا عن تطبيقات 


الويب العادية » هناك أسلويين ب2 التنقل بين الصفحات انظر الى الصورة : 


link page 


key page 


frame page 


هذه الصورة تلخص كل شىء تقربا و ب2 كلا الحالتين نحن لديا صفحة واحدة 
تقوم باحتواء صفحات أخرى › 2ے الأسلوب الأول K€۷ 38٥€‏ لدينا صفحة فارغة 
تماما و يتم احتواء الصفحات الآأخرى بداخلها › أما 2 الأسلوب الثاني عم )٣اا‏ 


لدينا صفحة بداخلها أداة ۲3۳€ هذه الآداة بدورها تحتوي على صفحات أخرى . 
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سنتحدث هنا عن الأسلوب الأول وهو K€۷ 038٥‏ و ستنرى لاحقا ے2 هذا الجزء 
الأسلوب الآخر للبدء بالعمل أضف صفحة جديدة تحت مسمى ك۴عع۷P۵عK)‏ ثم قم 
بتعديل شفرة أ۳ه×.00 بحيث يبدا التطبيق من هذه الصفحة » ب2 الصفحة 

manpage‏ ضف 8110١‏ حيث سنستخدمه للانتقال إلى صفحة 


re٣۴ sS 6€‏ حاول أيضا تغيير التصميم قليلا حتى تشعر بالفرق عند الانتقال . 


اللآن عد إلى الصفحة كءعع۷Pa۵عK‏ من شفرة ]۸۷× تأكکد تماما من آنك قمت 
بحذف ١۲١۲ع‏ الرئيسية المسماة ۲٥٥١‏ الاه ۷ة| » ثم ادخل على شفرة سى شارب 
الخاصة يهذه الصفحة » أضف بے مشيد الرئيسية الشفرة التالية : 


if (this.Content == null) 
{ 


MainPage mainPage = new MainPage(); 
this.Content = mainPage; 


1 


أيضا قم بإضافة الطريقة ع£ ء6010۸ إلى الصفحة sععyPaعk‏ بهن 


الشكل : 
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الجزء الثالث : الفصل السابع 


public void GoToThisPage(UserControl p) 
{ 


this.Content = p; 
1 


اللآن انتقل إلى الصفحة عع°3١‏ 1ة" و انشا الحدث ٣|٤٣)‏ لزر الانتقال لصفحة 


الأصدقاء » بداخل هذا الحدث اكتب الشفرة التالية : 


2 الصفحة الآأخرى اكتب نفس الشفرة لكن مع تغيير القيمة التي تم تمريرها إلى 
0o0 hisPage‏ إلى Mainpage‏ » ¥ أعتقد آبدا أن الشفرة تحتاج إلى توضیح 


فهي أبسط مما يمكن شرحه !»قم بتشغيل التطبيق الآن و جرب الأمر . 


بهذا نكون قد انتهينا من هذا الفصل تطرقنا فيه لأهم المجلدات و الملفات 2 مشاريع 
ightاverاSi‏ كما رأيتنا كيف أن ملف أ۳ه×.0ه مهم جدا لعمل تطبيقات 
Seri‏ » آخيرا رآينا آحد الأساليب التى تستخدم للانتقال بين الصفحات 2 


. Silverlight 


110 
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الفصل الثامن 
العمل خارج المتصفح 


رأينا بے مقدمة الكتاب كيف يمكنك تشغيل تطبيقات ا٣عاا٣‏ ۷6ا5 » خارج 
المتصفح بشكل سريع 2 هذا الفصل سنتعرف أكثر على هذا الأسلوب و ستنرى 
على صلاحيات آأكتر من المستخدم عند العمل خارج المتصفح . 
بعد الانتهاء من هذا الفصل بحب أن يضاف إلى معرفتک التالى : 

. تثبيت تطبيقك خارج المتصفح‎ e 

. تخصيص عملية التثبيت‎ ٠ 

. ابقاء المستخدم على آخرالتحديتات 4 التطبيق‎ ٠ 


. الحصول على صلاحيات آكبر من المستخدم‎ ٠ 


س 
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الجزء الثالث : الفصل الثامن 


تثبيت تطبيقك خارج المتصفح . 


ابدأ مشروع جديد ب2 أ۸ ع اا٣‏ ع۷اأ5 .2 منتصف الشاشة الرئيسية أضف ×€۴×80 
ڪت Iııخal mainPage ãحzزaصlا a> « OUt of Browsers Project‏ 
واضغط بزر الفأرة الأيمن و اختر Blend 2. Open with Expression B|€^d‏ 
و من القائمة ٤)‏ eز٬٣۴‏ حدد ائخيار Project setti¬g‏ verlightاSİ‏ ثم اختر 
pî « Enable Application Out of Browser‏ اضخط CTRL + Shift + ye‏ 


8 لبتاء التطبيق ثم 5 + CR) + S۸‏ لحفظ هذه الإعدادات . 


أغلق ۸۵ا8 ثم عد إلى 0ال لاا؟ أ٣uءأل‏ » قم بتشغيل التطبيق الآن لن تلاحظ 
شيء »و لکن انقر على زر الفأرة الأيمن ستجد خیارا جدیدا بعنوان Install OU Of‏ 
Prowse rs project in this computer‏ » انقر هذا الخیار ستخرج لک نافذة 
التثبيت و هي النافذة التي سيراها المستخدم حدد uلا"ع"‏ أاه5t‏ و الخيار 
٥s)t0عd‏ ثم انقر )0ء سيتم تثبيت البرنامج خارج المتصفح و سترى أيقونة 
التطبيق على سطح المكتب و 2 قائمة ابدآ » و سترى التطبيق آيضا 2 قائمة البرامج 


2 لوحة التحكم. 
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Silverlight 


Install utfBrowsers onto this computer... 


اذا قمت بتشغيل التطبيق سواء من المتصفح آو من سطح المكتب ستلاحظ تغيير 
الخيار أأةأك١ا‏ إلى ع۲۳0۷۵ » تخصيص عملية التثبيت ليست صعبة › بحكم آننا 
لم نتحدث حتى هذه اللحظة عن عملية التحديث فأرجو أن تقوم بإزالة التطبيق و 


حتى تقوم أيضا بتجرية الأمر ۲۳١0۷۴‏ . 
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عد إلى 0 لااك أهuاكأا‏ و حدد مشروع 


Window Title 


VerlightاSi‏ ثم اختر الآمر ەاا مم Pro‏ حدد 


out of browser project 


Width 540 
و‎ lacation manually ) 1 ٠ ®» ۱ ت يب‎ ۱ ۱ ۰ [1 Si lve أ‎ IgE ht ت یب‎ ۱ 


علی الزر Ut of browser s‌عاا| ٣£‏ ستجد کک د کک 
Application description‏ 


simple project at run out af browser 
نافذة إعدادات التطبيق › من هنا يمكنٽنڪ تعديل‎ 


» »مھ ھڅ ھ ي هه ع م x 16 Icon‏ 16 
| لعديد مں الخيارات ¢ اسم الشاشهة | الس 9 ican/1310109784_stock_task.png‏ 
x 32 Icon‏ 32 
ican/1310109784_stork_task.png E 3 2 LL‏ 

عرص النافذة ›> 9 اسم مح صر للتطبيق 9 أبضا x 48 Icon‏ 48 
icon/1310103784_stock_task.png‏ 
x 128 Icon‏ 128 


تفصيل التطبيق الذي سیعرص CE‏ قائمه البرامج ا ican/1310109784_stock_task.png‏ 


[¥] Use GPU Acceleration 

«e» »‏ خخ 0 ك کر ھچ ٠‏ چ که چ ® Show install menu‏ | 

[¥] Require elevated trust when running outside the browser لوحه التحكم وا يبضا ۱ يعوده ۱ لبرنامج وشکل‎ 2ِ 
ء‎ %۵ 

إطار التطبيق 2 الاأاسفل » هناك أسلوب متبع عند 


التعامل مع الأيقونات › 2 البداية يجب أن تكون 


Window Style 
Borderless Round Corners 


الأيقونات من النوع ١8‏ و ليس |٥0١‏ ء ثانيا يجب أن تكون داخل مجلد التطبيق › 
الأسلوب المتبع هنا هو إنشاء مجلد جديد 2 المشروع بعنوان |١0١‏ ووضع الأيقونات 
فيه » عدل خيار التطبيق كما يحلو لك و لكن لا تقوم بتحديد الخيار ۲€ اا4 ع۸ 
elevated trust when running outside the browser‏ › قم ببتliء‏ 
التطبیق من جدید سواء باستخدام ۴6 أو 8 + CR) + Sh¡۴t‏ أو من قائمة Bui|4‏ 


»ثم قم بتشغيل التطبيق و حاول التثبيت و انظر إلى الأيقونة الجديدة للتطبيق . 
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You are installing OFBP from http: localhost 


Please confirm the lacatians for the shortcuts, 
Start menu 
O besktap 


Mare Information 


كما تلاحظ تغيرت الأيقونة و تغير أيضا معها اسم المشروع قم بتثبيت التطبيق على 
سطح المكتب» من قائمة ابد انتقل إلى لوحة التحكم ثم البرامج ثم إزالة البرامج و 


لاحظ التطبيق وقد تم تتبيته على جهاز المستخدم » كما ب2 الصورة : 


+ OD F Control Panel * Programa #* Prograrris andl Features r | Fp 


Version 
2533 
122433 
9100514 
135 


40.20800 
40.309060 
1.1013 


210100816421 
1534.3308119 
1404117416 


4010 
2.5.50211 1 


Installed On Size 
617/2011 
6/12011 
AIF 
172011 
18/2011 
222011 
2211 
222011 
74/01 
E FE 
EN 
632011 
242011 
F111 
222011 


Publisher 
NVIMA Corporation 
NVIDMA Corporation 
NVIMA Coporatior 
NVIMA Corporation 
lacalhast 


Micreaoft Corporation 
Microsoft Corporation 
Microsoft Corporation 
Ypg ol 

Micresoft Corporation 
Microsoft Corporation 
Micrasoft Corporation 


winrar DrmbH 
Microsoft Corporation 


Uninstall or change a program 


To uninstall a program, select it from the list and then click Lninstall, Change, or Repair, 


rganize * Uninstall 


| Name 
TB NVIDIA Graphics Driver 27533 
TB NVIDLÃA HD Audis Driver 1.2.33 
E NVIDLA Phys System Software 10,0514 
SB NVIDIA Update 1.3.5 
[OF 


Î Visual Studio AIO Tools for SQL Server Compact 33 


FIWCF ELA Services V1.0 for Visual Studio 10 
f Web Deployment Tool 

EA Windaws CHE Ta WORD 30ê 

EFWindows Internet Explorer Platform Preview 
BF Windows Live Essentials 2011 

2 Windows Lie Syrre 

O Windows Media Encoder 9 Series 

DS WINRAR 401 G2-bit) 

EIWPF Toolkit February 2010 (Wersion 3.5502111] 


localhêšt Comments: simıple project ol nun out of browser 


Lontrol Panel Hore 


View installed updates 


Tum Windows fesbures on or‏ ا 
aff‏ 


لننتقل الآن للخطوة التالية و هي عملية تحديث التطبيق › أو إن صح التعبير إبقاء 


المستخدم مطلع على آخرالتحديتات . 
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ما زالت لدينا مشكلة هنا » كيف يعرف المستخدم أنه يمكنه تثبيت البرنامج على 
جھازه! لذلڪ يتطلب عليك إخباره بهذه الأمر » لعمل ذلك سنضيف زر إلى 
الصفحة الرئيسية سنستخدم هذا الزر لعملية التثبيت انشا حدث )ءا للأآداة 
Button‏ . لتنفين هذه الفكرة يجب أولا أن نتأكد بأن التطبيق ليس مثبتا على 
جهاز العميل و بالتالي عرض النص |٣53‏ أما إذا كان مثبتا سنخفي الزر كليا › 
2 المشيد الرئيسي للصفحة 031١٥388‏ سنتحقق من أن المستخدم لم يقم بتثبيت 
التطبيق من قبل بالشكل التالي : 
if (Application.Current.InstallState != InstallState.Installed)‏ 
{ 


button1.Content = "Install; 


1 


else 


{ 
button1.Visibility = System.Windows.Visibility.Collapsed; 
1 


آما 2 الحدث C1٤)‏ فستكتب أمر التثبيت بهذا الشكل : 


* Application.Current.Install(); 


فقط ١‏ قم ببناء التطبيق الآن و جرب إزالته ثم شغل التطبيق من جديد و جرب الزر . 
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vy 


۴ 


+ » * م a mA‏ م ھ 
ابقاء المستخدم على اخر التحدينات في التطبيق 
أحد أهم الأمور التي كانت تشكل أزمة نووية تقريبا لدى مطوري التطبيقات هي 
عملية تحديث التطبيقات التي يقومون بتطويرها لدى المستخدم و إبقاء المستخدم 
على آخرالتحديتات »› لمعالحة هذه المشكلة كان هناك العديد من الحلول » من أشهر 
هذه الحلول هو كتابة ملف على الخادم و قراءته و بتغيير رقم الإصدار 2 الملف عن 


رقم الإصدارالمثبت تتم عملية التحديث 


Seri ght 2‏ الأمر مختلف تقرییا کلیا › هنا لا یوجد ملف بل آن آدنی تخییر 2 
تصميم الصفحات أو إضافة ملفات جديدة يطلق مباشرة الحدث ٥2ل‏ ملا » للآسف 
لا تتم العلمية بشكل تلقائي بل يجب عليك تفعيلها يدويا » لعمل ذلك 2 البداية 
سنتحاج للتأكد من وجود تحديث 2ے المشيد الرئيسي للصفحة › أضف الشفرة 


التائهة : 


e 


 Application.Current.CheckAndDownloadUpdateAsync(); 


أعتقد آنك قد أصبحت تعرف كيف تتعامل مع الطرق ۸5۷١٥١‏ من خلال الفصول 


السابقة فهنذه الطرق تطلق حدث 4٤†ع٤أام‏ "۳ ١ K0‏ اكتب : 


" Application.Current.CheckAndDownloadUpdateCompleted+= 
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و انقرعلى زر 30 مرتين من لوحة المفاتيح حتى يتم إنشاء الحدث بشكل تلقائي 
داخل هذا الحدث ستخبر المستخدم متلا إذا كانت هناك تحديتات جديدة آم لآ و 


ذلك باستخدام المتغير € ›الشفرة : 


void Current_CheckAndDownloadUpdateCompleted(object sender, 
CheckAndDownloadUpdateCompletedEventArgs e) 


{ 
if (e.UpdateAvailable) 


{ 
MessageBox.Show("Application updated, please restart to apply 


changes."); 


1 


للتجربة قم بتغيير لون خلفية اد 8۲١‏ الرئيسية للأآسود ثم قم ببناء التطبيق › عد 
إلى أيقونة التطبيق المثبتة على سطح المكتب و قم بتشغيل التطبيق ( لاحظ النسخة 
المثبتة على سطح المكتب يجب أن تحتوي على الطريقة K۸ 8٤)لم 43٥‏ قبل تغيير 
لون الد كأ۲ع ) » سيخبرك التطبيق بوجود تحديتات » لتنفين هذه التحديثات 


علي إعادة تشغيل التطبيق » أغلق التطبيق و سترى الشاشة السوداء آمامك الاآن . 
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نقطة آخرى 2 التطبيقات الكبيرة و التي تحتوي على العديد من النماذج لابد 
أن تكون عملية التأكد من التحديتات داخل الملف أ"۳ه×.300 و بالتحديد _2 


. Application_StartUup لحد‎ 


۵« 0 7 « “م ¥ 
الحصول على صلاحيات اكبر من المستخدم 
رآینا 2 فصل " تخزين البيانات على جهاز المستخدم " ڪيف آذنڪ محدود ڪليا 
بحجم ۲ ميجا › إذا أردت مثلا تطوير تطبيق يقوم بتسجل ملفات فيديو مثلا فآنت 
تحدıد‏ اlخlıر Require elevated trust when running outside the‏ 


. out of browser setti¬g ةiفli‎ ja browser 


e‏ سلالعلر NEK‏ ۱ تت انثئت عنتدها و 77 4 سخرج FBP‏ ات 
Site: http:fflocalhost‏ 
Publisher: Unverified‏ 


نافذة مشئومة نوعا ما لتخبر المستخده 


(a) Hide options Install 1 


بتحذير أمني © ( انظر الصورة على اليسار ك 


[Wl Desktop 


This application does not have a valid digital signature that verifies the 
publisher. You should only run software from publishers you trust. 
More Information 
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هناك مشكلة آخرى عند العمل خارج المتصفح » 2 التطبيقات التي تحتاج للاتصال 
بقاعدة البيانات عليڪ التآڪد دائما بوجود اتصال متوفر بالاإنترنت ڪي تكون 
متصل بقاعدة البيانات لعمل ذلك سنحتاج إلى فضاء الأسماء 
Networklnformation‏ التابع د ع". System‏ سأضیف اداتین من النوع 
اما إلى الصفحة الرئيسية بحيث تعرض حالة الاتصال بالإنترنت للمستخدم »2 
المشيد الرئيسي للتطبيق سنطلق حدث NetWorkAccessCha ges‏ .و 2 ھıi‏ 


الحدث ستعرض إما ۸€ CK0۸‏ أو Disconnect‏ .الشفرة : 


NetworkChange.NetworkAddressChanged += new 
NetworkAddressChangedEventHandler(NetworkChange __ 
NetworkAddressChanged ); 


void NetworkChange NetworkAddressChanged(object sender 
, EventArgs e) 
{ 
if (NetworkInterface.GetlsNetworkAvailable()) 
{ 
IbICheck.Content = " Connect "; 
lbICheck.Foreground = new SolidColorBrush(Colors.Green); 


1 


else 
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IlbICheck.Content = " Disconnect "; 
lbICheck.Foreground = new SolidColorBrush(Colors.Red); 


ا 


قم بتنفين التطبيق الآن لن يحدث شىء حتى تقطع الاتصال بالإنترنت › بمعنى إذا 
قام المسىتخدم بتشغيل التطبيق وكانت الشبكة آأصلا غير موجودة لن يحدث شىء › 
لمعالجة هذه المشكلة يمكنك فقط نسخ محتوى الحدث al NetworkChage‏ 


المشيد الرئيسى ے2 الصفحة malnPag€‏ . 


î. | out of browser project - lacalho! 


Check Network 


اا رأينا 2 هذا الفصل كيف يتم تنفين تطبيقات ا۸ عا ۷6اأ5 خارج المتصفح 
بشكل كامل تقريبا » تطرقنا إلى عملية التتبيت و كيف يتم تخصيص عملية 
التطبيق ثم رأينا كيف تتم علمية تحديث التطبيق بدون استخدام أية ملفات أو ما 
شابه › آخيرا رآينا كيفك يمكنك مراقبة الاتصال بالاإنترنت ے2 حالة ڪان 


التطبيق يحتاج إلى اتصال الانترنت . 
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التعامل مع الوعمص ءآ 
İgداö DeepZoom‏ 


2 هذا الجزء ستتعرف على كيفية التعامل مع [۸8٣١6858‏ » بالإضافة إلى 
استخدام أحد أهم الأدوات التي تم تطويرها د أ١‏ ل|أ 5|۷6۲ وهي أداة 


06600 التي تستخدم لعرض الصور . 
بعد الانتهاء من هذا الحزء يحب أن يضاف إلى معرفتڪ التالي. 


° التعامل مع الثيمات 


. Dep Z001 استخدام أداة‎ ° 
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التعامل مع ال مص ءعطth‏ 


إذا كنت قادم من تطبيقات ۸5۶.۸٥1‏ فمن المؤكد أذنك قد تعاملت يوم ما مع ما 


يسمى ب ]K55S‏ و غيرها من التقنيات والأدوات التى تستخدم لإنشاء تصميم معبن 
بحيث يكون هذا التصميم عام على جميع أجزاء المشروع » هنا يأتي دور ١ئع٥٣۳‏ طا و 
دور ملف أ"3×.٥0ه‏ و لكن هذه المرة سنتعامل مع "3۳× بدلا من شفرة ۲١۸3ء‏ € 


. آخيرا سنرى كيفية استخدام ۸8١١8١‏ جاهزة بدلا من إنشائه من الصفر . 


بعد الانتهاء من هذا الفصل يجب أن يضاف إلى معرفتك التالي : 


تعيين الد ٣۴١١۵‏ لأداة معينة و جعلها كمصدر 2 البرنامج باستخدام 
app.xaml‏ . 
® wlةخIlıم theme‏ lëhıصãa‏ ڍڊ Silverlight toolkit‏ . 


۵ استخدام ۳۴ 1€ ] جاهزة . 
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تعيين ال ٥٠۳٠ط†‏ لأداة معينة و جعلها كمصدر 
البرنامج باستخدام أا٣ه×.م‏ مه : 


لنبدآً بالعمل 4 هذه النقطة نريد أن نقوم بتغير شكل الأداة ١0ا0‏ باستخدام 
B0‏ .» افتح مشروع جديد ب2 ۸ ع ااا ع اا5 ثم افتح الصفحة الرئيسية 2 8٥۸۵4‏ 
أضف 2 الصفحة 0١‏ ]۷ا0 أو زر » حدد ١0لا8‏ و انقر بزر الفأرة الأيمن من 
أسفل القائمة حدد الخيار €aامem"ا ٤dit‏ و من ثم حدد الخيار Edit CopY‏ 


ستظهر أمامك نافنذة Create S†yأ|ء R€501۲°€‏ 2 هذه النافذة لديك خياران» 


Lreate Style Resource 


Name [Key] 
‌ 
Apply to all 
Define in 
Application 


ê This document LIserCLontrokl no namez 
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إما أن تقوم بتعديل 5۷€ لهذا الزر داخل هذه الصفحة 
فقط او آن تقوم بتعديل الخیار إٿى ¬ټApplicati‏ 


بحبث تستطيع استخدامه علی کامل المشروع ) حلد : raa‏ . 


الخیار his docu e٤‏ ان دع اسم اد عاyاء‏ كما EES‏ 


Press el 

Cisa bled . 
wT FacusStates ۰ هو دم انقر على موافقی‎ 
{IFbjecrts andl Timelime ص‎ 


= Morrual 


مو اللآن على تحکه کامل د style‏ الخااص بهذا ButtonStylel (Button a‏ 23 


wT * Template 
vT iB8 [Grid] 


الہ Butt‏ » ستجد جميع ani "2|0١‏ ے2 نافذة 


=~ i! Background 


a= 
= 
a= 


TE contentPresenter 
O GisabledWisuralElemer | ڪما رأینا سانقا 2 الفصل الاول ( و ستری‎ status 


جمیع الأجزاء التي بتکون متها button‏ داخل ٥A۸]‏ 


لنبدأً اللآن بتعديل ال Sاأ513‏ الخاص بأداة 7 0)) 6U‏ . 


حدد 835€ قم بإجراء بعض التغييرات على الألوان 

كما رآينا 2 الفصل الأول » إذا قمت بتحديد العنصر OAT1L jم Backg۲/٥U١۱۵4‏ 
ستلاحظ علامة صفراء 2 جزء الألوان ب2 أعلى جزء الخصائص »هذا يعني أنك لا 
تستطيع تعديل هذا الجزء من هنا و لكن علي إعادة بنائه من الصفر › لذلڪ انقر 
على النقطة الصفراء و حدد الخيار ا۲65 و ابد بإعادة التصميم . لاحظ أن الزر 


لديه العديد من الحالات لذلك ريما تريد أيضا تعديل كل هذه الحالات . 
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لن أشرح آي شيء عن طريقة التصميم فقد تعاملنا معها من قبل ب2 الفصل الأول 
عدل ۳ ترید و اض بعص الوقت باں متکشاف آجزاء العنصر Button‏ لعا آن 
e‏ أناملك إ١[‏ خالابةه من التعديلات التى ترغب بها > اضخط على 8 + CR‏ › 


أغلق ١١٤أم‏ ۲۴۳ من أعلى منطقة التصميم . 


افتح الصفحة عع°4١اaج"‏ مجددا من نافذة كأ٤ع[ه٣۴‏ ستلاحظ عندها بأن 


٥اtyك‏ الجديد قد تم تطبيقه على ال ١0ا5‏ الموجود أصلا » و لكن إن أضفت 


FT Miscellaneous 


Style System Windows Style 


70 آخر لن ترى آي شيء !۱ يجب عليڪ تحديد 
٤اك‏ لهذا العتنصر من الخاصية ع الاء كل آدوات ا ٣عاا٣۷6اأ؟‏ تتمتع بهذه 
الخاصية حدد الخاصية من شريط 0۲06۲۲١٤۴5‏ أو ايحث عنها من أعلى الشريط › 
انقر زر المريع بجانب الخاصية › ثم حدد الخيار re٥0٣ ٤5‏ أaعها‏ ستجد اد عارst‏ 


الجديد حدد الخيارو سترى هذا 5۷€ قم بتطبيقه على الزرالجديد . 


إذا أين تم حفظ هذا الد ع|5 » افتح ملف شفرة ا۸۷N×‏ للصفحة الرئيسية و 
انظر إلى العنصر الجديد الذي تم اضافته › و الذي يبدا بالوسم .0/5١٤۳0۸٣۲عءلل‏ 


. TFEeSOUFCES 


الأن لننتقل إلى الجزء الأخير و هو استخدام ال 5۷€ على مستوى المشروع هذه 
المرة » إذا قمت بإضافة صفحة جديدة إلى المشروع و آضفت زر إليها و حاولت آن تفعل 
نفس الآمر لن تجد أي |5 » لذلك يتم استخدام الملف أ 300.×3 » بمعنى إذا 
كنا 2 البداية عند اlilفiةö Application رlıèۃhı create style resoOUrCES‏ 


فسوف يتم حفظ اد أك داخJ‏ اpugl >Application.Resources>‏ بد من 
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sاserContorل‏ »افتح ملف ۳"1 0.×3ه و 2 شفرة )۸۷× أضف الشفرة التالية 


,<Application.ResourCcesS> دقعe‎ Û! 


<Style x:Key="CloseButton" TargetType=" Button"> 

<Setter Property="HorizontalAlignment" Value="Right"/> 

<Setter Property="Width" Value="50"/> 

<Setter Property="Height" Value="25"/> 

<Setter Property=" Template" > 

<Setter.Value> 

<ControlTemplate> 

<Border x:Name="brd1" Width="22" Height="22" 

CornerRadius="15"> 

<TextBlock x:Name="txt1" Foreground=" #222" 
TextAlignment="center" Text="r" FontSize="11" 
VerticalAlignment="center" FontFamily="Webdings"/> 

<Border.Background> 

<RadialGradientBrush GradientOrigin=".3, .3"> 

<GradientStop Color="#FFF" Offset=".15"/> 

<GradientStop Color="#777" Offset="1"/> 

</RadialGradientBrush> 

</ Border.Background> 

</ Border> 

</ControlTemplate> 

</Setter.Value> 

</Setter> 

</Style> 
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لا تنزعج من شفرة XAM‏ قد قمت بعملها باستخدام 
B۵0‏ و لکن آرید أن تحصل علی تفس اد ع الاك 
الذي قمت آنا بإنشائه › الأآأن عد مجددا إلى اداة 
Button‏ 2 الصفحة التثانية و افعل الخطوات ذاتها 
عند تغيير ال ع الاك لأداة B۲0١‏ الأولى هذه المرة 


ستجد الخیار U0١‏ 8عءها€) .» یمکنڪك أيضا 


استخدام هذا ال 5۷€ 2 آي جزء من أجزاء المشروع . 


Silverlight toolkit ڊب‎ ةصاخll‎ theme استخدام‎ 


أتمنى أن تكون قد تابعت الكتاب من المقدمة » لقد طلبت منك ے2 المقدمة أن تقوم 
بتتبيت أداوت )|00 الخاصة ب أ٣عاااع۷آأS‏ »تحتوي هذه المكتبة على العديد من 
ہا الجاھزة للاستخدام افتح مشروع جدید بے ۸ع اا٣‏ ۷6ا5 › قم بتشغیل 
الأمتلة لأداة اأ)أامهآ وذلك من قائمة اید 2 مجلد 4 Microsoft Silverlight‏ 
0 |ااApr it‏ )ا0 ایبحث عن کع٥آم‏ "ھ5 )|100 » ستجد عنصر تحت مسمی 

them‏ داخل هن العنصر هناك تقريبا ]٣" ۴۳٣٠١ ٠١‏ » سنآتي الآن لطريقة 


استخدام هذه N٤۳68‏ داخل مشارaıح»ڪ‏ 2 Silverlight‏ . 
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Rainiar Orange Rainiar Purple System Colors 


Line Graph 

150 
Ik Mm 
مي‎ | 


200 2004 


Scatter Graph 


لإضافة 1۴۳٥١‏ عليك أولا اضافة المراجع ككك 


Whistler Blua Bureau Black Bureau Blue Shiny Blua Shiny Rad 


3 ١ Exprassion Light 


Accordionltem1 F#| TreeviewIterm 1 


Bar Graph 


Accordionltemza F#| TreeviewIterm 4 


Accordionltem3 


Airfare 


100 
of 4 FFI 


Column Graph 
a EERE Tabitem 2 


FirstName Bill 


LastName Gates 


5 
» $F » ف‎ 

الخاصة نها »2 محلد €5٣٤۴۸٥۲٥۴عr٣‏ أضف - 
» »م » * Version Runtime Pz‏ 
C:‏ 2.0.50727 4.0.5.0 
v20.50727  C: |‏ 4.0.5.0 
۰ خ Cı‏ 2.0.50727 4.0.5.0 
الخکتات کها 2 الصورد ۵ على اليسار عك |  C:‏ 20.50727 4.0.5.0 
CC: * 8 * ۶‏ 2.0.50727 4.0.5.0 
v2.0.50727 CC:‏ 4.0.5.0 
v2.0.50727  C:‏ 4.05.0 
» * م مھ *  C:‏ 2.0.50727 4.05.0 
اضافة المكتبات الخاصة د e them”‏ 
v20.50727  C .‏ 4.0.5.0 
v2050727 C7‏ 4.0.5.0 
v20.507271 Ciz 5‏ 4.05.0 
٠‏ مھ /ہ ۰ ۰ ٠» ٠‏ ۰ 1 - :€ 2.0.50727 4.0.5.0 
ل ۱ ل لس حل مھا مں د خل ADSI Ca‏ 1.0.5.0 

1 ٣ 
e 
بالشکل التالی : ست ]ا[‎ nal Pم‎ € 
- E 3 اا‎ e 


TR nda % July, 2011 ٣ Shows] 
| : 2 Food] 
Lorem Ipsum dolor sit amet : lo Tu We Th Fr Sa 
Hotels] 
4 5 : 


.- - س ماو ج ا 


Bubbles Crema Twilight Blua 


Button 


uqagleButtan 


Textbox 


RadicEButton 1 
® RadioButton 2 

RadicEutton 3 

CheckBox 1 


T cCheckBox 2 


۳ 
oe Add Reference 


NET Projects 1 Browse 1 Recent 


Filtered to: Silverlight 4 


Component Name 
System, Windows,Controls, Toolkit 
System, Windows, Controls, ToolkitInternals 
em Windows. Controls, Theming.BubbleCreme 
3 
system. Windows.Controls, Theming.BureauBlack 
| Syst 9 
System. Windows.Controls. Theming.BureauBlue 
| Syst 3 
ystem. Windows.Controls, Theming.ExpressionDark 
q.txpı 
| System. Windows, Controls, Theming.ExpressionLight 
em Windows, Controls, Theming.RainierOrange 
9 9 
system. Windows. Controls, Theming.RainierPurple 
9 P 
System.Windows.Controls. Theming.ShinyBlue 
gqhıny' 
ystem.Windows.Controls, Theming.ShinyRed 
g.2nıny' 
| System, Windows, Controls, Theming.SystemColors 
em Windows,Controls, Theming. TwilightBlue 
9 9 
| System, Windows. Controls. Theming.WhistlerBlue 
4 | ıı 


xmins:BlackTheming="'clrnamespace:System.Windows. 


Controls.Theming;assembly=System.Windows.Controls. 


Theming.BureauBlack" 
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بعد استدعاء فضاء الأسماء تد Bureau 6Bاac) ۲٣٥۴٣۳۴‏ يمكنك يكل بساطة 
تطبيقه على النموذج باستخدام الحاويات » حيث أن كل ۲۸8۳١8‏ يمتلك هذه الميزة 
»داخل ال 6٣١‏ و 2 XAN1‏ اکتب : 


<Canvas> 
<BlackTheming:BureauBlackTheme> 


</BlackTheming:BureauBlackTheme> 
</Canvas> 


هذه هي الحاوية الرئيسية لد ٣۴‏ ع1۸ الآن ڪل شيء 
ستكبته داخل هذا الحاوي سيتملڪ بشكل تلقائي 
خصائص هذا اد 1۸٤۳٥‏ لاحظ آنه بمكنك أيضا 
الكتابة خارج هذا الحاوي » 2 الصورة التي على 


اليمبن لدينا زرين أحدهما داخل الحاوي و الآخر 


خارج الحاوي » يمكنك تجرية 1۸8۳65 أخرى من خلال تغيير قضاء الآأسماء إلى 


اد۴ "he"‏ الذي ترغب . 
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استخدام ٥٣۳٥طع‏ جاھزة 


رآينا 2 الفقرتين السابقتين كيف تقوم بإنشاء 51۷|٥€‏ خاص يك و استخدمناه على 
مستوى التطبيق آو على مستوى الصفحة » 2 هذه النقطة سنرى كيف تقوم بإنشاء 
طا خاص بک و استخدامه ے2 تطبیقات آخری »و استخدام 1۸٥۳١65‏ آخری 


داخل مشروعڪ . 


لنبدأً بالنقطة الأولى › افتح مشروع "١اا‏ ۷6|أ5 جديد » ثم انشا مجلد اسمه 
5 حيث جرت العادة على أن ملفات ۸8۳۴١‏ ] توضع ب2 هذا المجلد › داخل 
المجلد أضف عنصر جديد من gaw Silverlight Resource Dicti0^3F¥ gail‏ 


املف متلا ٥أراك‏ . 


عند إعداد التيمات هناك بعض المسميات المتفق عليها أولا ۷|65SأK0۲65‏ و يستخدم 
لتعديل ثيمات المكونات الرئيسية د ا۸ عاا٣ Sve‏ » خم sعاk)itstyاtoo‏ و هنا تضع 
ثيمات الأدوات أأ)أامهآ مثل أداوت التقييم و القوائم وأداة الإكمال التلقائي 
سنتعرف لاحقا على ادوات اا )اهه] » ثم لدینا کع‌اراء)هء و هي ادوات )50 مثل 

Data grid‏ و DataPager‏ و Child Window‏ › ثم لدینا 0"5 و فيه یتم 
إعلان الخطوط المستخدمة 2 التطبيق »ثم لدينا ۸65كلا0۲ و يستخدم لتخزين 
الأشكال و الألوان التي تستخدمها 4 تصميم ال٥۳ "٣"۴‏ » أخيرا لدينا 65S‏ الآ؟ و هذا 
الآخير تقوم به 2 تخزين أية إجراءات تقوم بتعديل شكل الأداة كما رأينا مع أداة 


. سایقا‎ Button 


131 
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سأستخدم الشفرة التى 2 الأعلى (شفرة |٥5٥8 0١‏ ) لتغيیر شكل أدوات 
Butt‏ » فقط انسخ الشفرة و الصقها داخJ‏ |glسuم۾ ResourceDictI0^2F¥‏ « 
الخطوة التالية هی إخبار التطبیق بأن لدینا ۴٤الا؟‏ مخصص لل ہااںB‏ داخل 
ملف أ" ه×.0 » بهذا الشكل : 

<Application.Resources> 


<ResourceDictionary> 
<ResourceDictionary.MergedDictionaries> 


<ResourceDictionary Source="Assets/Style.xaml"/> 
</ ResourceDictionary.MergedDictionaries> 
</ ResourceDictionary> 
</ Application.Resources> 


فقط » الآن انتقل إلى النموذج الرئيسي و أضف زر ثم من الخاصية ا۷ء للعنصر 


الجديد » الآن أصبح لديك ملف اء يمكنك إعادة استخدامه 2 أكثر من 


e» e 
© 
e ¢ 
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الجزء الرابع : الفصل التاسع 


حسنا ماذا عن الثيمات الجاهزة ١‏ » ڪما 
Hg System. Windows,Browser‏ 

2 System.Windows.Controls لا بد آن‎ ۲1٣٤۴۳۴٥۴ آسلفت ذکره سابقا کل‎ 
A1 System. Windows, Controls. Data 

AS System. Windows, Controls. Data. DataForm, Toolkit 


A System. Windows, Controls. Data.lnput يحنوي علی مالف واحد او آڪتر من الملفات‎ 
1 System. Windows.Lontrols. Data, Toolkit 

A System. Windows, Controls. DataVisualization, Toolkit 8 EY ۰ ۱ هة‎ ۰ e 
i System. Windows, Controls.In put ے2 ۱ لمر = @ 1 روع‎ ٤ لتي ے2 ا2‎ ۱ 


A) System. Windows, Controls.Input, Toolkit 

AA System. Windows. Controls.Layout, Toolkit ُڪتر من را عه‎ TT h eMmMe€esS “Aa کک کک رد‎ 
AS System. Windows. Controls. Navigation 

1) System. Windows, Controls, Toolkit 

يمكڪٽڪ استخدمها مح تطبقا تڪ دشکل System. Windows, Lontrols, Toolkit.Internals‏ 1 


+1 Systern.Arnl 


مباشر حاليا احذف ال١‏ 0)]ا6 و احنذف 

ملف S|‏ » افتح المجلد 1۴۳۴١‏ بے مرفقات المشروع ستجد مجلد بعنوان 
Pac)‏ tعل‏ داخله مجلد بعنوان 5565S‏ داخل المجلد الاخیر توجد ملفات ۸٥۴٣٥٤۵3۱‏ 
> قم بإضافة جميع الملفات إلى مجلد كأ3556 بے مشروعك » إذا حاولت تنفين 
المشروع الآن ستتفاجاً بكم هائل من الأخطاء هذه الأخطاء فقط نتيجة عدم وجود 
مكتبات )ه١١‏ اللازمة » حدد المكتبات المطلوية من نافذة الأخطاء و قم بإضافتها 
إلى المشروع › انظر إلى الصورة 2 الأعلى » إذا حاولت الآن أن تقوم بإضافة أي عنصر 
إلى آي صفحة 2 التطبيق ستجد مباشرة أن هذه الأداة قد حصلت على اد ٣٤٣۳‏ 

الجديد لها . لا تنسى أن تقوم بإضافة الملفات الآخرى الموجودة داخل مجلد كأa556‏ 
إلى الملف أ۳ 3×. م3 كما رايت مع الملف أ"۳ه×.5|8 و ليصبح ملف "۳× بهذا 
الشكل : 


<Application.Resources> 
<ResourceDictionary> 


<ResourceDictionary.MergedDictionaries> 
<ResourceDictionary Source="Assets/Style.xaml"/> 
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<ResourceDictionary Source= 
ResourceDictionary Source= 
ResourceDictionary Source 
/ResourceDictionary. eee ENE 
ResourceDictionary: 
Application.Resources 


Core controls SDK Controls Toolkit Controls 


Please walt... 
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إلى هنا نكون قد انتهينا من هذا الفصل › رآینا فيه کیف یتم تعدیل ۲٣٤۴۳٣٤۶‏ 
الأدوات الجاهزة و كيف يتم استخدام هذه التعديلات على مستوى النموذج أو على 
مستویى التطبيق بالکامل › ڪما رآينا ڪيف يتم إنشاء ۲1۱٤۳۴‏ خاص بڪ و 
استخدامه 2 تطبيقات أخرى » تطرقنا للملف أ"00.×3۳ه و رأينا كيف أن هذا 
الملف يلعب دورا مهما 2 مشاركة المصادر بين أجزاء المشروع المختلفة › أخيرا رأينا 
أجزاء ادئ6 "٣۴٣ا‏ المختلفة و رأينا 65" ۲"۴ ال )اما . ع التهاية تصميم 
تطبيقات ۸ع اا ع۷اأS‏ من الأمورالممتعة جدا عند الحديث عن استخدام ۸۵ا8 و 


لكنها من الآمور الكثيبة عند استخدام ×۸٧‏ فقط . 
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الفصل العاشر : 
التعامل مع pZ00ءDe‏ 


توفر أداة Z001‏ 06€ طريقة جيدة لعرض الصور بدقة عالية و بطريقة أكثر 
قريا لتطبيقات ۸عاا٣ع۷آأS‏ من استخدام آداة |۳١3٥‏ العادية » يمكنك رؤية 
تطبيق مباشر لأداة 000200۳ على موقع ۸0٤)‏ ۸2۲۵ » سترى 2 هذا الفصل 
كيف يمكنك استخدام الأداة بدون كتابة سطر واحد من الشفرة © »و ستعرف 


حقا معنی أن تصبح مطور ا۸ i|g|اver Sil‏ . 


f ۱‏ 
بعد الانتهاء من هذا الفصل يجب أن يضاف إلى معرفتك التالي : 


استخدام أداة DeepZOm€‏ . 


ل 
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لقد ذكرت بے المقدمة رابط الحصول على 06٥۴200١‏ . لذلك سأفترض هنا 
أنك قمت بتثبيت هذه الأآداة مسبقا » من قائمة ابدأ حدد البرنامج 200۳ معع0) 
Composer‏ . قم بإنشاء مشروع جدید و lڏيکjن SilverlightDeepZ0¡°0°™°‏ « 


ستجد نفضسك الآن ب2 بيئة التطوير الخاصة بد 0۴۴0⁄00۳ . 


| SilverlightDeepZoom - Deep Zoom Composer ھک ڪا‎ 1 
File Edît View Tools Help 
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اضغط على زر ۸0٩ |۳38٥‏ و أضف الصور التي تريدها 


> سيبدء المعالج مباشرة بجلب الصور و جعلها ڪمصدر 


للبرنامج (الصورة على اليسار ) الآن الخطوة التالية هي 
إنشاء شكل معين لعرض الصور » حدد الخيار K0١١05€‏ من الأعلى » ستجد الآن 
شريط الصور 2 الأسفل » 4ے الجهة اليمنى ستجد شريط |۵۷٥١‏ أو الطبقات › 
حيث آن كل صورة تشكل طبقة مستقلة بذاتها » على اليسار سترى آدوات التنسيق 
من محاذاة الصور و التكبير و التصغير و خلافه » أخيرا 2 منتصف منطقة العمل › 
اللآان ركز قليلا ابد بسحب آي صورة من شريط الصور و رميها على منطقة 


التصميم » آثناء عملية الرمي سترى الحدود الحمراء بين كل صورة وأخرى . 
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بعد أن تحدد الصور التي ترغب بعرضها › 
انتقل للخطوة الأخيرة )0۲× » حدد 
اoم×E‏ من الأعلی » سیظهر لڪ شريط 
على اليسارء لديك أولا الخيارات ألا مأOu‏ 


P٥‏ و متها يمكنك تحديد نوع الملف 


الذي تريد عمل ٤×0۲‏ له حیث يمکنڪ 
اخراجھا علی شکل صور او علی شکل تطبیق ۸۲ ع S۷٥٣‏ حدد ^۸ Silver ig‏ » ثم 
من خیارات ١٥10ا‏ م0 ortمEx>p‏ ے الخيار كعاةام۴۳٤١‏ يمكنك تحديد مجموعة 
من الخيارات ما يهمنا ا¥آّن هو الخıار Expression Blend 4 + S5S0UFC€‏ حددa‏ 
الخيار » ثم غير اسم المشروع إلى "٤٤×‏ 0⁄معع0 اضغط على ×0٣)‏ للبدء 
بعملية التصدير › انتظر للحظات حتى تنتهي العملية . و لننتقل إلى استخدامها 
من 8|۸4 » انقر على الخیار eW ٢¬ 8B]0 W5۴۲‏ أevا(‏ سيظهر هذا الخیار بعد 
عملية التصدير ) . افتح المشروع الصادر سواء ب ۷5 أو 8|6١‏ و ابد بتنفين المشروع 


مباشرة » فقط © . 
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« 
الخاتمةه ٠‏ 
كما تطرقت ے4 بداية الکتیب » هد ے الرئیسیى 2 هذا الكتيب هو ناء معرفتڪ حول 
الأمور الرئيسية 2 ۸ع ا٣6 S۷‏ . كبداية 2 هذا العالم أعتقد أن هذا يكفى › ما 
زال هناك المزيد من الأمور المتقدمة لذلك أرجو متنك زيارة هذه المصادر لكى تبقى 
متابعا أولا بآول عما يدور »و تحصل على آخرالأآخبارو الأدوات و الشروحات و خلافه 


, Silverlight 2 ةةلعتkا‎ 


: خلاصات المواقع الرئيسية‎ ١ 


e Silverlight Cream . 
e Silverlight Community . 


e Silverlight SNOW . 
: M٥۲00 خلاصات مدونات مطوري‎ ۵ 
e Jesse Liberty 
e Tim Heuer 
e Jeff Wilcox 
e Christian Schormann 


e Jaime Rodriguez 


e Mike Taulty 
e Peter [orr 


e Corrina Barber 
e John Papa 
e Pete Brown's Client Roundup 


140 


۵ خلاصات فیدیو و برودکاست : 


Silverlight TV 
Inside Windows Phone 
This Week in Silverlight 
: خلاصات المحدونات الرسمية‎ ١ 

Windows Phone Developer Blog 
Silverlight Blogs 

: Silverlight خلاصات أھم مجتمعات‎ 
Dan Wahlin 
Shawn Wildermuth 


Adam Kinney 
Brian Noyes 
Jeremy Likness 
La Liga Silverlight 
Michael Crump 
Victor GaudiosOo 


WCF Silverlight team 
Alex van Beek 


Timmy Kokke 
Roboblob 
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فهرس المحتويات 


المحتوى 

مقدمة : قبل بدء العمل مع Silverlight‏ 
تثبيت آدوات التطوير الخاصة ڍ Silverlight‏ 
دورة حيlة‏ تطuıةlت Silverlight‏ 

تطuıةlت Silverlight‏ ۾ ASP.net‏ 
مرحبا بالعاڌم Silverlight jn‏ 
الجزء الأول : البداية مع Silverlight‏ 
الفصل الأول : تصميم تطبيقات ٤ع|اا۲ءvاSi‏ 
التعرف على Microsoft Ble ^d‏ 

الفصل الثاني :أدوات أ"أعاا٣ ۷٥‏ آ5 القياسية 
استخدام ادوات ۸ S||۷6۲1١9‏ القياسية 

ولا الخصائص المشتركة بين الأدوات 

تانيا الأحداث المشتركة 

ضم البيانات بين الأدوات أو 6|۸18 data‏ 
التحقق من البيانات و Data validatİ01‏ 
الجزء الثاني :2 أعماق ٣‏ عااSilver‏ 
الفصل الثالث : تخزين البيانات على جهازالمستخدم 
التعرف IsolatedStorage File yl‏ 
الكتابة و القر|ءة ڊlستخlم IsolatedStorageFile‏ 
الفصل الرابع: الوصول لخدمات الويب 

الفصل الخامس: الوصول لقواعد البيانات 
lتخIıم Web Service‏ 

WCF R|IA مIدختسا‎ 

الفصل السادس: التعامل مع الوسائط المتعددة 
iدöı Media Element‏ 

استخدام كاميرا الويب 

الجزء الثالث : المزيد عن ۸ ع!Silver|li‏ 
الفصل السابع : أجزاء مشاريع عا veاSi‏ 
مکونات مشروع اد ۷٥۲‏ 

مکونات مشروع Silverlight‏ 

App.xaml فلkı‎ 
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الانتقال بين الصفحات Silverlight 2Z‏ 

الفصل الثامن : العمل خارج المتصفح 

تثبيت تطبيقڪ خارج المتصفح 

ايقاء المستخدم على آخرالتحديتات 4 التطبيق 
الحصول على صلاحيات آكبر من المستخدم 

الجزء الرابع :اڏmes DeepZo0om slدi, he‏ 
الفصل التاسع: التعامل مع اد ع٣‏ عطڄ 

تعيين اذ ]۸€۳١۴‏ لأداة معينة و جعلها كمصدر 2 البرنامج باستخدام أ" xa×.ممa‏ 
lستخIıم theme‏ ıخlصة‏ ڍ Silverlight toolkit‏ 
استخدام ٤۴٣۳۴‏ 1] جاهزة 

الفصل العاشر: التعامل مع ١۴001ء0‏ 
استخدام دة DeepZO€‏ 

الخاتمة 
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